So here's what I'm trying to do:
I have two icons side by side, and underneath I have two spans that are hidden. When I mouse-over an icon I want the corresponding span to appear.
------------ HTML Part -----------------
<span class="icons"><!--ICONS-->
<li class="oneLI">one</li>
<li class="twoLI">two</li>
</span>
<span class="popups">
<span class="one"></span>
<span class="two"></span>
</span>
--------------CSS Part --------------
span.popups span.one,span.popups span.two{opacity:0;
span.icons:first-child:hover + span.popups span.one{opacity:1}
span.icons:last-child:hover + span.popups span.two{opacity:1}
Now obviously this doesn't quite work, how would I go about this using only CSS?
http://jsfiddle.net/RLhKK/
The adjacent sibling combinator ( + ) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element .
Definition and UsageThe :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links.
The adjacent sibling selector is different from the general sibling selector as it selects only the element that immediately follows an element, whereas the general sibling selector selects any element that follows an element.
The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the first selector.
Let me explain your selector first which is
span.icons:first-child:hover + span.popups span.one{opacity:1}
Well, you are trying to select the first-child nested under span.icons
and on hover of that you select span.one
which is nested inside span.popups
but you are going wrong here, you are selecting adjacent span
element having .popups
which is not adjacent to the span
which is nested inside .icons
, but in general, your selector is wrong, CSS cannot select the parent, inshort, CSS cannot go back once it enters an element, it cannot move up the hierarchy.
So you cannot do that way, either you need to alter your DOM, and bring all the span
elements at the same level, or your hidden span
should be at the child level.
And another way to achieve this is by using position
, which I won't suggest here.
Also, your markup is invalid, you need to have ul
element around li
.
Lets alter the DOM and see how we can select
<span class="icons"><!-- Better use div here -->
<ul>
<li class="oneLI">one <br /><span class="one">Show Me</span></li>
<li class="twoLI">two <br /><span class="two">Show me as well</span></li>
</ul>
</span>
.icons li > span {
opacity: 0;
}
.icons li:hover > span {
opacity: 1;
}
Demo
Demo 2
<div class="icons">
<span class="hoverme">Hover Me</span>
<div id="hover1">First</div>
<span class="hoverme">Hover Me</span>
<div id="hover2">Second</div>
</div>
.icons > div[id] {
opacity: 0;
height: 100px;
width: 100px;
background: red;
}
.icons > span {
display: block;
}
.icons > span:hover + div {
opacity: 1;
}
You can use display
or visibilty
property as well, if you do not want to use opacity
as they are well suited when you want to transit an element using transition
.
Demo 3 (Using transition
if you are going for opacity
method)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With