Bokchee 88 Bokchee 88 - 3 months ago 9
CSS Question

target specific div that is inside a href and all that is wrapped with main div for hover in css

How to target a div to do a hover effect that is wrapped inside a href and all that sits inside main div like a holder? When the user hover on the item,i want for example the p element to have hover effet that it is inside div el with class item.
How to target elements like this? If it's possible to do only with css?
Something like this

<div id="ItemsEmployees">
<a href="">
<div class="itemHolder">

<div class="nameTitle">

</div>
<div class="item">
<p>I want only this div to have hover style</p>
</div>

</div>
</a>
</div>



Answer

You can use a descendant selector to select it. Here is some code:

<div id="ItemsEmployees">
    <a id="anchor" href="">
        <div class="itemHolder">
            <div class="nameTitle"></div>
        </div>
        <div class="item">
            <p>I want only this div to  have  hover style</p>
        </div>
    </a>
</div>

And then some CSS:

#anchor:hover .item {
    /* Do stuff here */
}

What this does is select #anchor (which is link, I added an ID) and when it hovers, effects .item, which is the paragraph element.

Here's a JSBin demonstrating with font-size.