更改悬停另一个元素上的元素样式 [英] Change element style on hover another element

问题描述

我有三个元素，我需要改变一个元素的风格，悬停在其他两个。

html

 < div class =pagination> 
< span class =step-links> 
 {％if page_obj.has_previous％} 
< div class ='not-current'>  {％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 。 不在 .not-current 下。这种行为更好地使用JavaScript实现。

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).

解决方案

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

这篇关于更改悬停另一个元素上的元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！