Как изменить цвет фона DIV, когда пользователь наводит курсор на HREF, содержащийся внутри?

У меня есть строка меню, содержащая несколько пунктов меню.

менюбар с пунктами меню

Строка меню представляет собой div, содержащий пункты меню (которые также являются divs), и внутри каждого пункта меню у меня есть href.

Вот HTML:

<style>
.menubar-style {
    width: 100%; 
    background-color: white; 
    height: 20px; 
    text-align:center;
}
.menuitem-style {
    float: left; 
    width: 10%; 
    border-right: thin; 
    border-right-style:solid;
}
</style>
...
...
<div class="menubar-style">
    <div class="menuitem-style"><a href="#">Link 1</a></div>
    <div class="menuitem-style"><a href="#">Link 2</a></div>
    <div class="menuitem-style"><a href="#">Link 3</a></div>
</div>

Что я хочу сделать, так это изменить цвет фона элемента меню (div, а не только href), когда курсор находится над ссылкой.

Как я могу перехватить событие mouseover из ссылки и использовать его для окрашивания фона всего элемента меню?

Еще лучше, есть ли способ проверить, находится ли мышь над всем пунктом меню (div, а не только над ссылкой)? Это был бы лучший вариант, потому что пункт меню менял бы цвет с помощью мыши в любом месте над полем, а не только над ссылкой.

Заранее спасибо!

Ян


html background-color onmouseover
person Jan Tacci    schedule 10.11.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

вы можете просто добавить селектор :hover к любому предопределенному стилю, чтобы применять его только тогда, когда мышь находится над этим конкретным объектом

.menuitem-style:hover {
    background-color: red;   // only changes to red if the mouse is hovering.
}
person Ahmad    schedule 10.11.2012
comment
Прохладный! Однако я заметил, что вы меняете стиль границы справа, а не цвет фона? Или это то, что происходит на самом деле? Думаю, можно попробовать и посмотреть. :) - person Jan Tacci; 10.11.2012
comment
Да и не обращайте внимания на мой комментарий выше. Мне просто нужно добавить background-color к наведению курсора. - person Jan Tacci; 10.11.2012

arrow_upward
0
arrow_downward

Для этого вам нужно будет использовать какой-нибудь javascript или jQuery. Однако было бы проще просто изменить цвет div при наведении курсора на div.

Добавьте это в свой <head>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Вы должны добавить класс к вашему тегу <a>, назовем этот класс menu-link. Таким образом, вместо <a href="#">Link 1</a> у вас будет <a href="#" class="menu-link">Link 1</a>.

Теперь вы можете добавить следующий код jQuery в свой <head>:

<script>
     $('a.menu-link').hover(function()
     {
         $(this).parent().css('background-color', 'red');
     }, function()
     {
         $(this).parent().css('background-color', 'white');
     }
</script>

Этот код jQuery изменит цвет фона родителя тега <a>, которым в данном случае является ваш тег <div>.

person Cezary Wojcik    schedule 10.11.2012
comment
jQuery для обработки только события наведения ?? - person techfoobar; 10.11.2012
comment
Он хотел изменить div при наведении курсора на тег a внутри. Конечно, проще/лучше просто изменить div при наведении курсора на div, но вопрос был не в этом. - person Cezary Wojcik; 10.11.2012
comment
Ваше решение правильное и к вопросу. Я имел в виду, что включение jQuery является излишним для такого небольшого требования. - person techfoobar; 10.11.2012
comment
Приятно то, что вы можете легко адаптировать этот код для использования .animate() с плагином цвета jQuery, чтобы получить более плавный переход. - person Cezary Wojcik; 10.11.2012