我是一名有用的助手,可以为您进行文本翻译。
我有三个元素,需要通过悬停在其他两个元素上来更改其中一个元素的样式。
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;
}
当鼠标悬停在.not-current元素上时,其样式会改变,但#current元素的样式不会改变。我哪里做错了?(仅在Chromium 12.0中测试过)。
~
是一个非常方便的运算符,以前我甚至在寻找如何处理兄弟姐妹的子元素时也束手无策!正如上面的回答中提到的那样,我倾向于使用JS来处理这种情况。所以,感谢你向我介绍它! - Nathan Hornbya:hover > svg { filter: drop-shadow(2px 2px 2px black); }
我最终不得不使用>
选择器而不是~
。以前,我只能通过直接悬停在图标上来应用效果。非常感谢,这是一个非常流畅的例子,你的JSFiddle让概念非常清晰。顺便说一句,这也让我省去了一些花哨的JS解决方案...简单明了! - twknab