CODEWITHSUNDEEP
css
smarcellus
smarcellus

Reputation: 98

CSS :hover only works on first instance of class

.Row:hover .Contents  { background-color:Blue; }

<div class="Row">
   <span class="Contents">Row Contents</span>
</div>
<div class="Row">
    <span class="Contents">Row Contents</span>
</div>

In the above sample, only the first Row Contents responds to hover. See http://jsfiddle.net/3JRTQ/. I'm not sure what I'm doing wrong, particularly since .Row .Contents {} works for all instances just fine.

I don't want to highlight the entire row - just the span with text, but I want the whole row to respond to hover.

Is this possible with CSS only?

Upvotes: 0

Views: 1090

Answers (2)

KernelCurry
KernelCurry

Reputation: 1297

Fix for this example. Make the Span the hover

.Row .Contents:hover  { background-color:Blue; }

OR make the Div the element that is going to be changing:

.Row:hover { background-color:Blue; }

Hope this helps

Upvotes: 0

Sean Redmond
Sean Redmond

Reputation: 4114

You've hit a bug in Chrome 25 (and 26, too). Remember, always try another browser.

Upvotes: 2

Related Questions