Hover över en bild skall ändra ett annat element

sätt :hover på det element och sätt css egenskaper på barnen

typ:

.treat-module .small>div:hover hh3 {
	
}

(även om hh3 inte är ett OK element)

Hej!

Stort tack :) Nu funkade det perfekt!

Får ändra hh3 till något annat, hade en konflikt med formateringen för h3.

Tack för tipset :)

Stötte på ett litet problem, får inte texten att bli vit när jag "hovrar" över bilden men det fungerar när man håller över elemetet hh3 hur kommer det sig?

behöver nog ett exempel på vad som inte fungera. du få ju även sätta a-elementet inne i din div element:

.treat-module .small>div:hover a {}

Nu har jag uppdaterad sidan http://shop.bellitudo.se/behandlingar/
(kan behöva trycka F5 ett par gånger ;) Men där ser du själva problemet om man hovrar över bilden eller om man gör det via testen.

Förstår inte riktigt vad jag ska lägga för kod i

.treat-module .small>div:hover a {}

Och så här ser koden ut nu:

CSS

.module{margin:0;padding-top:12px;}.module img{display:block;}#secondary-content .module{margin:2px 0 0 0;}.treat-module{position:relative;}.treat-module{margin-right:0;}.module .small .h3Treat{font-size:90%;}.module .small .h3Treat a{padding:6px 8px;}.row{position:relative;overflow:hidden;padding-bottom:2px;}.row div{position:relative;float:left;margin-right:2px;}.row div.active{border-bottom:0;}.row .h3Treat{position:absolute;left:0;bottom:0;margin:0;width:100%;text-transform:uppercase;line-height:1;font-weight:bold;}.row .h3Treat.structural{left:-9999px;}.row a:link,.row a:visited,.row a:active,.row a:focus{display:block;text-decoration:none;}.treat-module .row a{color:#000;}.treat-module .row a:hover{color:#fff!important;}.treat-module .row .h3Treat a:hover{}.treat-module .row .h3Treat{color:#000;background:transparent url(buttons.png) -2104px -1422px;}.treat-module .small>div:hover .h3Treat {background:transparent url(buttons.png) -2104px -1122px;color:#fff!important;}

HTML

<div class="module treat-module">
    <div class="row small">
        <div><div class="h3Treat"><a href="http://shop.bellitudo.se/behandlingar/ansiktsbehandling">Ansiktsbehandling</a></div><a href="http://shop.bellitudo.se/behandlingar/ansiktsbehandling"><img src="http://shop.bellitudo.se/bilder/behandling/ansiktsbehandling.png" alt="Ansiktsbehandling" width="234" height="156" border="0" /></a></div>
        <div><div class="h3Treat"><a href="http://shop.bellitudo.se/behandlingar/fransar-och-bryn">Fransar & Bryn</a></div><a href="http://shop.bellitudo.se/behandlingar/fransar-och-bryn"><img src="http://shop.bellitudo.se/bilder/behandling/fransar_bryn.png" alt="Fransar &amp; Bryn" width="234" height="156" border="0" /></a></div>
        <div><div class="h3Treat"><a href="http://shop.bellitudo.se/behandlingar/fotter">Fötter</a></div><a href="http://shop.bellitudo.se/behandlingar/fotter"><img src="http://shop.bellitudo.se/bilder/behandling/fotter.png" alt="F&ouml;tter" width="234" height="156" border="0" /></a></div>
    </div>
    <div class="row small">
        <div><div class="h3Treat"><a href="http://shop.bellitudo.se/behandlingar/makeup">Makeup</a></div><a href="http://shop.bellitudo.se/behandlingar/makeup"><img src="http://shop.bellitudo.se/bilder/behandling/makeup.png" alt="Makeup" width="234" height="156" border="0" /></a></div>
        <div><div class="h3Treat"><a href="http://shop.bellitudo.se/behandlingar/harborttagning">Hårborttagning</a></div><a href="http://shop.bellitudo.se/behandlingar/harborttagning"><img src="http://shop.bellitudo.se/bilder/behandling/vaxning.png" width="234" height="156" border="0" /></a></div>
        <div><div class="h3Treat"><a href="http://shop.bellitudo.se/behandlingar/kropp">Kropp</a></div><a href="http://shop.bellitudo.se/behandlingar/kropp"><img src="http://shop.bellitudo.se/bilder/behandling/kropp.png" alt="Kropp" width="234" height="156" border="0" /></a></div></div><div class="row small">
        <div><div class="h3Treat"><a href="http://shop.bellitudo.se/behandlingar/duobehandling-specialbehandling">Duo- & Specialbehandling</a></div><a href="http://shop.bellitudo.se/behandlingar/duobehandling-specialbehandling"><img src="http://shop.bellitudo.se/bilder/behandling/duobehandling.png" alt="Duo- & Specialbehandling" width="234" height="156" border="0" /></a></div></div></div>

I wordpress kan ju flera element namn användas, hur gör man lättast för att "isolera" elementnamn så att formateringen gäller enbart i det avsnittet det skall användas? Tänker på <a>,<h3>,<div> osv.. för att undvika att flera formateringar påverkar utseendet?

måste du ha CSS på en rad, är ju inte direkt enkelt att följa det.

Jag hade nog hellre satt en klass på diven som just nu inte ha en klass eftersom det är den som är den minsta gemensamma elementet alla dina andra element använder.

.treat-module .small > div:hover a { color: #fff; }

hjälper(?)

Hej!

Tack för all hjälp :) Nu funkar det precis så som tänkt!

Ber om ursäkt för CSSen på en rad... ska tänka på det till nästa gång.

Ha det gott!