2 hover tegelijk activeren

Status
Niet open voor verdere reacties.
G

gebruiker78

Gebruiker
Lid geworden
29 jun 2010
Berichten
428
Hallo,
Ik heb 2 div's en wil als je 1 van de div's hovert ze allebei een text-decoration: underline; krijgen. Hoe kan ik dit doen met CSS?
Ik kan het wel met jQuery doen, maar is het ook mogelijk met CSS?
Het probleem nu is dat als ik bijvoorbeeld div 1 hovert alleen die een underline krijgt. Terwijl als ik div 1 hover, div 1 EN 2 een underline moeten krijgen.

HTML: 
/* slideshow text */
.imgText{
	position: absolute;
	margin: -200px 0px 0px 75px;
	padding: 5px;
	background-color: black;
	color: white;
	opacity: 0.8;
	width: 250px;
	word-wrap: break-word;
	font-size: 12px;
}
.slideAndText h2{
	position: absolute;
	margin: -250px 0px 0px 75px;
	padding: 5px;
	background-color: black;
	color: white;
	opacity: 0.8;
	width: 250px;
	word-wrap: break-word;
}
.imgText:hover, .slideAndText h2:hover{
	text-decoration: underline;
}
 
Zo he, lastige vraag. Met SASS zou het waarschijnlijk mogelijk zijn, aangezien je hier CSS kan nesten en chainen.
Echter zonder SASS kan ik alleen bedenken dat dit mogelijk is als element2 een child is van element1

Code: 
element1:hover { text-decoration: underline; }
element1:hover element2 { text-decoration: underline; }

Zoals je zelf al meld is jQuery hier perfect voor, gewoon gebruiken dus :)
 
Laatst bewerkt:
MM,
dat gaat lastig:
HTML: 
<section class="slideAndText">

<li>

<a href="http://google.nl">

<img src="http://marktyrrell.com/labs/blueberry/img/slide1.jpg" width="1000" height="400"/>

<h2>test</h2>
<span class="imgText">voor dit maarja dat maakt toch niet zoveel uit of wel dan?></span>

</a>

</li>

</section>

heb wel een paar mogelijkheden geprobeerd, maar helaas lukt dat niet...

Maar wel bedankt!
 
Laatst bewerkt:
Andersom zou het mogelijk zijn.
Maar je kunt met css momenteel alleen children benaderen dus
Code: 
    .slideAndText > .imgText:hover { text-decoration: underline; }
Werkt helaas niet
Code: 
    .slideAndText:hover .imgText { text-decoration: underline; }
Werkt wel.

In dit geval is jQuery je oplossing.
 
Hoi David,
Ja, met css alleen zal het alleen bij geneste elementen kunnen werken (zoals bij een uitrolmenu), of misschien in sommige gevallen met een absoluut gepositioneerde <span>.

Met javascript valt het wel te realiseren.
Maar daarvoor hoef je toch geen zware jQuery-boekenkast mee te sturen?
Kan ook met een simpel zelfbouw javascriptje, dacht ik. ;)



Met vriendelijke groet,
CSShunter
 
jQuery is niet zwaar en werkt vele malen sneller en prettiger dan javascript. De dagen dat een scriptje van 32kb problemen kon leveren zijn met gemak wel voorbij
 
Tja, hoe ziet een jQuery-versie van mijn testpagina er dan precies uit?

Met vriendelijke groet,
CSShunter
 
De jQuery ziet er als volgt uit
Code: 
$(document).ready(function()
{
	$('#imgText').hover(function(){
		$(this).css('text-decoration', 'underline');
		$('#slideAndText').css('text-decoration', 'underline');	
	}, function(){
		$(this).css('text-decoration', 'none');
		$('#slideAndText').css('text-decoration', 'none');	
	})
});

Tevens betreft het hier DOM manipulatie en deze dient ingeladen te zijn voor de DOM geplaatst wordt, in dit geval mag jouw <script> tag dus niet buiten de <head> staan.
 
Bedankt voor de hulp, dan word het toch jQuery.
jQuery omdat het toch al op de pagina geladen word en ik meer met jQuery werk dan als "gewoon" JavaScript...
 
Hoi David en grumbkow,
Ah, als jQuery er toch al in in zit heb ik geen bezwaar. ;)

Succes!
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan