Изменить стиль элемента при наведении курсора на другой элемент

У меня есть три элемента, и мне нужно изменить стиль одного элемента, наведя курсор на два других.

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


html css hover
person I159    schedule 06.08.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Это потому, что #current не находится под .not-current. Такое поведение лучше реализовать с помощью JavaScript.

person silverstrike    schedule 06.08.2011

arrow_upward
5
arrow_downward

Вы можете сделать это с помощью родственного селектора CSS ~, с оговоркой, что ваш элемент при наведении курсора должен располагаться перед элементами, которые вы хотите стилизовать в разметке. Однако вы можете отображать их в любом порядке.

Демо: jsFiddle

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>
person ThinkingStiff    schedule 28.02.2013
comment
Я пишу CSS более 10 лет, и все же нахожу методы, которых никогда раньше не видел. ~ - очень удобный оператор, и я раньше даже искал, как обращаться с детьми братьев и сестер, и ничего не нашел! Как упоминается в ответе, я склоняюсь к JS, чтобы справиться с таким сценарием. Так что да, спасибо, что познакомили меня с этим! - person Nathan Hornby; 15.04.2015
comment
Это должен быть принятый ответ. Мне удалось добавить тень к значку SVG (отличный шрифт) в состоянии наведения ссылки следующим образом: a:hover > svg { filter: drop-shadow(2px 2px 2px black); } Мне пришлось использовать селектор >, а не ~. Раньше я мог применить эффект только при наведении курсора на значок. Большое спасибо, это был такой замечательный пример, и ваш JSFiddle прояснил концепцию. P.S. Это также избавило меня от некоторых забавных JS-решений ... красиво и просто! - person twknab; 31.05.2021

arrow_upward
2
arrow_downward

.not-current:hover #current заявляет, что #current находится под .not-current, как сказал @silverstrike.

Используйте JavaScript для этого: http://www.w3schools.com/js/js_events.asp < / а>

or

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

person galchen    schedule 06.08.2011