Change element style on hover another element

Question

I have a three elements and I need to change style of one element by hover on other two.

html

<div class="pagination">
        <span class="step-links">
            {% if page_obj.has_previous %}
                 <div class='not-current'><a href="?page={{ page_obj.previous_page_number }}">{{ page_obj.previous_page_number }}</a></div>
            {% endif %}

            <div id='current'>                
                {{ page_obj.number }}
            </div>


            {% if page_obj.has_next %}
                <div class='not-current' ><a href="?page={{ page_obj.next_page_number }}">{{ page_obj.next_page_number }}</a></div>
            {% endif %}              
        </span>
    </div>

css

#current, .not-current:hover {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
    border: orange outset 3px;
    background-color: orange;
    margin: 0 auto 10px auto;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .5);
}

.not-current {
    width: 15px;
    height: 15px;
    line-height: 15px;
    background-color: #A29F9F;
    border: #A29F9F outset 2px;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .5);
}

.not-current:hover #current {
    display: none;
}

Styles of hovered element (.not-current) are changed but styles of #current element aren't changed. Where am I wrong in there? (Tested only in Chromium 12.0).

Solution 1

That's because #current is not under .not-current. This behaviour is better implemented using JavaScript.

Solution 2

You can do this with the CSS sibling selector ~, with the caveat that your hover element must come before the elements you want to style in the markup. You can display them in any order you like, though.

Demo:

CSS:

#one:hover ~ #three,
#six:hover ~ #four {
    background-color: black;
    color: white;
}
#four {
    margin-left: -35px;
}
#six {
    left: 80px;
    position: relative;
}
.box {
    cursor: pointer;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    outline: 1px solid black;
    text-align: center;
    width: 30px;
}

HTML:

<p>Hover over 1 and 3 gets styled.</p>
   <div id="one" class="box">1</div><!--
--><div id="two" class="box">2</div><!--
--><div id="three" class="box">3</div>

<!-- this works because 4 is after 6 in the markup, 
despite its display position -->
<p>Hover over 6 and 4 gets styled.</p>
   <div id="six" class="box">6</div><!--
--><div id="four" class="box">4</div><!--
--><div id="five" class="box">5</div>

Solution 3

.not-current:hover #current states that #current is under .not-current as @silverstrike said.

Go with JavaScript on this one: http://www.w3schools.com/js/js_events.asp

or

jQuery: http://api.jquery.com/mouseover/

Solution 4

the best thing to do is to target the parent with the :hover pseudo-class and style the child using :not(:hover) as shown

<div class="team__header">
        <img src="img/sam.jfif" alt="team member 1" class="team__image">
        <img src="img/brii.jpg" alt="team member 1" class="team__image">
        <img src="img/humphrey.jpg" alt="team member 1" class="team__image">
        <img src="img/user-4.jpg" alt="team member 1" class="team__image">
    </div>

your css will look like this

.team__header:hover .team__image:not(:hover){
    border: 3px solid red;
}

View more solutions

Comments

[Nathan Hornby]

I've been writing CSS for over 10 years, and yet still I find techniques that I've never seen before. ~ is a very handy operator, and I've even looked for how to deal with children of siblings before and come up blank! As is mentioned in an answer upthread I tend to fall to JS to deal with such a scenario. So yea, thanks for introducing me to it!

[twknab]

This should be the accepted answer. I was able to add a shadow to an SVG icon (font awesome) on the link hover state as follows: a:hover > svg { filter: drop-shadow(2px 2px 2px black); } I ended up having to use > selector rather than ~. Previously, I could only apply the effect by directly hovering on the icon. Thanks so much, this was such a slick example and your JSFiddle made the concept very clear. P.S. This also saved me doing some funky JS solution...nice and simple!