Change element style on hover another element
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开发者_如何学Python-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).
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>
That's because #current
is not under .not-current
. This behaviour is better implemented using JavaScript.
.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/
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;
}
精彩评论