CODEWITHSUNDEEP
css
nebkat
nebkat

Reputation: 8565

CSS Two Divs Affect Eachothers Children

I have a .logo div on my site which contains .icon and .text. It also contains .links, which is under the .text but not part of the actual logo image. Both .icon and .text have children .image and .image-hover which I use to make a background-image fade effect (for the logo).

HTML:

<div class="logo">
    <div class="icon"><span class="image"></span><span class="image-hover"></span></div>
    <div class="text"><span class="image"></span><span class="image-hover"></span></div>
    <div class="links">Links</div>
</div>

CSS:

.icon:hover .image {
    opacity: 0;
}
// opposite for .image-hover

.text:hover .image {
    opacity: 0;
}
// opposite for .image-hover

The issue is that the icon and text are independent, making it seem rather ugly. I don't want .links to affect (so .logo:hover can't be used). Is it possible to make .icon:hover affect .text .image and vice-versa?

http://jsfiddle.net/7kj7G/

EDIT I have already tried JSW189's suggestion. The .links are under .text and .icon is the same height as both. If I try wrap them the box is only the size of .text and doesn't include the full .icon.

EDIT It seems the issue with JSW189's suggestion was only the z-index of .icon making the box smaller.

Upvotes: 1

Views: 87

Answers (2)

user652649
user652649

Reputation: 

<div class="logo">
   <div class="icon"><span class="image"></span><span class="image-hover"></span></div>
   <div class="text"><span class="image"></span><span class="image-hover"></span></div>
   <div class="links">Links</div>
</div>

selectors to affect .icon .image AND .text .image on hover

.logo:hover .icon .image
{
    opacity: 0;
}

.logo:hover .text .image
{
    opacity: 0;
}

Upvotes: 0

JSW189
JSW189

Reputation: 6325

You could wrap .icon and .text in another div, and use the :hover pseudo-class for that div. That way all the :hover styles will appear when the user hovers over either .icon or .text.

HTML:

<div class="logo">
    <div class="wrap-icon-and-text">
        <div class="icon"><span class="image"></span><span class="image-hover"></span></div>
        <div class="text"><span class="image"></span><span class="image-hover"></span></div>
    </div>
    <div class="links">Links</div>
</div>

CSS:

.wrap-icon-and-text:hover {
    /* styles here */
}

Upvotes: 1

Related Questions