Style parent on hover

Status
Niet open voor verdere reacties.
ErikBooy007

ErikBooy007

Terugkerende gebruiker
Lid geworden
24 mei 2007
Berichten
3.814
Is het mogelijk om de parent van een element te stylen bij een hover? Zo zeg maar, maar dan valid en werkende CSS ;)

Code: 
CHILD:hover PARENT {
  // specific style on hovering child.
}
 
Wellicht heb je hier iets aan :)

Anders zou je het met jQuery op kunnen lossen (Ligt mij bij dat je dat gebruikt, of dat hier ook is: dunno :D)

Als tr je child is wordt het dit:
[js]
$("tr:parent").css("background-color", "black");
[/js]
 
Uit die pagina maak ik op dat het met puur CSS niet wil, zoals ik al een beetje verwachtte.

jQuery kan inderdaad een oplossing zijn. Goed punt.

Bedankt!
 
met gewoon javascript ...?

Zoiets misschien?
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>parent-hover</title>
<style type="text/css">
.parentHover {
   width: 350px;
   margin: 20px;
   padding: 5px;
   border: 1px solid #C0C0C0;
   background: #EBFFFF;
   }
</style>
<script type="text/javascript">

function hoverParent(i){
   var j= i-1; // nummering array's begint bij 0
               // nu kan nummer v/h blokje aangehouden worden
   var hoverArray = document.getElementsByClassName('parentHover');
   hoverArray[j].style.background="#CDFFC1";
}
function parentBack(i){
   var j= i-1; 
   var hoverArray = document.getElementsByClassName('parentHover');
   hoverArray[j].style.background="#EBFFFF";
}
</script>
</head>

<body>
<noscript>Javascript staat niet aan - dan doet ie het niet...</noscript>

<div class="parentHover">
   <h2>Blokje 1</h2>
   <p>Dit is een &lt;div&gt;'je met class=&quot;parentHover&quot;.</p>
   <p>Er staat een 
   <a href="#nogniks" onMouseOver="hoverParent(1)" onMouseOut="parentBack(1)">link</a> in. 
   Als het goed is, verandert de achtergrondkleur van dit blokje, als je over de link hoevert.</p>
</div>

<div class="parentHover">
   <h2>Blokje 2</h2>
   <p>Dit is ook een &lt;div&gt;'je met class=&quot;parentHover&quot;.</p>
   <p>Er staat ook een 
   <a href="#ooknogniks" onMouseOver="hoverParent(2)" onMouseOut="parentBack(2)">link</a> in. 
   Als het goed is, verandert nu de achtergrondkleur van dit blokje, als je over de link hoevert.</p>
</div>

</body>
</html>
Deze is niet 100% automatisch; je moet in de html bij elke link met de hand ingeven in welk blokje hij zit. Maar misschien kan een scriptfather hier nog iets moois op verzinnen. ;)

Met vriendelijke groet,
CSShunter
 
Bedankt voor je suggestie, maar dan lijkt mij de suggestie van Tha Devil toch een stuk makkelijker.
 
het probleem bij de oplossing van tha devil is alleen dat het een directe parent moet zijn.

Met de code hieronder kan het ook een parent van een parent zijn. Je specificeert de parent door de gewenste selector op te geven voor de "parents" method
Code: 
// met behulp van jquery
$('td').parents('table.change').css('border', '1px solid black');

Natuurlijk wel nog even de hover actie definieren
Code: 
$('element').mouseover(function (e) {
 // do the css change
});

$('element').mouseout(function (e) {
 // return the css change
});
 
Laatst bewerkt:
Plus dat die van mij geen hover-functie is ;)
Ging meer om het voorzetje.

Verder kun je de mouseover + mouseout ook met ".hover(in, out)" doen.
Scheelt weer code ;)
 
Zou je de code hier willen plaatsen + wat voorbeeld-code (qua HTML)?
 
Ik zit nu niet achter de computer waar de site op staat. Zo gauw ik daar weer achter zit, zal ik de code posten.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan