CODEWITHSUNDEEP
csshtml
Oneezy
Oneezy

Reputation: 5013

How to hover over img and make and change link color?

I'm curious as to why this doens't work? My guess is that whatever element your targeting you have to go through its parent. Am I right or is there a trick? (no jquery)

Checkout the fiddle: http://jsfiddle.net/eMw5C/

HTML

This doesn't work

Trigun 

    <h1>This Works</h1>
    <div class="yes-working">
        <img src="https://i158.photobucket.com/albums/t109/hp_arianepotter/trigun-1.png" />
        <a href="javascript:void(0);">Trigun</a>
    </div>

    /* This doesn't work */
    .not-working img { width: 10em; clear: both; }
    .not-working img:hover a { color: red; }
    .not-working a { color: black; }
    .not-working a:hover { color: red; }

    /* This works */
    .yes-working img { width: 10em; clear: both; }
    .yes-working:hover a { color: red; }
    .yes-working a { color: black; }
    .yes-working a:hover { color: red; }

Upvotes: 2

Views: 213

Answers (4)

Pitra Z&#233;K&#233; Wibisana
Pitra Z&#233;K&#233; Wibisana

Reputation: 11

you have invalid path selector on .not-working class.. try this :
.not-working img:hover ~ a { color: red; }

syntax (AFAIK) :
"~" mean select next object
">" mean select children object in one step level bellow

but I don't think you can re-select parent object

CMIIW

Upvotes: 1

Dennis Best
Dennis Best

Reputation: 3654

In the non working example, the anchor tag is not child of the img tag. 

.not-working img:hover a { color: red; }

Should be:

.not-working img:hover ~ a { color: red; }

Works here: http://jsfiddle.net/eMw5C/1/

Upvotes: 1

Aldi Unanto
Aldi Unanto

Reputation: 3682

Its worked :

.not-working img { width: 10em; clear: both; }
.not-working:hover a { color: red; }
.not-working a { color: black; }
.not-working a:hover { color: red; }

http://jsfiddle.net/aldiunanto/eMw5C/2/

Upvotes: 0

mohkhan
mohkhan

Reputation: 12315

Because .not-working img:hover a means that your anchor tag <a> is inside the img tag which is not true. It is true in the second case and that's why it is working.

Upvotes: 0

Related Questions