[英]Change backgroundcolor of div when class of list item is hover
my website has a horizontal main menu. 我的网站有一个水平的主菜单。 This menu has a submenu for each menu item.
该菜单包含每个菜单项的子菜单。 When an item of the submenu is hovered the class of that item gets 'hover' added.
当子菜单项被悬停时,该项目的类别将被添加“悬停”。 When hover is added I want the background color of div (class 'part2') to change.
添加悬停后,我想更改div(“ part2”类)的背景颜色。
Site: europebathroom.com 网站: europebathroom.com
See the code below. 请参见下面的代码。 In this case I have hovered item4 and then subitem2 which gets 'hover' added when you hover the item.
在这种情况下,我将鼠标悬停在item4上 ,然后将subitem2悬停在项目上时添加了“ hover”。
CODE 码
<ul class="dj-main"> //main menu
<li class="item1">...</li> //main menu items
<li class="item2">...</li>
<li class="item3">...</li>
<li class="item4">
<div class="submenu"> //dropdown div
<div class="part1"> //first half containing submenu
<ul class="dj-submenu"> //submenu
<li class="subitem1">...</li> //submenu items
<li class="subitem2 hover">...</li> //hovered submenu item
</ul>
</div>
// id = part2 added because of the script below
<div class="part2" id="part2">...</div> //second half containing color
</div>
</li>
</ul>
Currently div class = part2 has no backgroundcolor. 当前div class = part2没有背景色。 When hovering subitem2 (when its class = subitem2 hover) the background color must change.
悬停subitem2时(当类别= subitem2悬停时),背景颜色必须更改。 I've tried the script below.
我已经尝试过以下脚本。
JAVASCRIPT JAVASCRIPT
$('ul.dj-submenu li').each(function(){
if $(this).hasClass('subitem2 hover'){
document.getElementById('part2').style.backgroundColor = '#a5a5a5';
}
});
You can try this 你可以试试这个
Having re-read your question, I've adjusted the code a bit. 重新阅读您的问题后,我对代码进行了一些调整。 Try this
尝试这个
$('.subitem2').hover(function(){
if($(this).hasClass('hover')){
$('.part2').css('background-color','#a5a5a5');
}
});
You can do it with css only : 您只能使用css来做到这一点:
ul.dj-submenu >li:hover {
background:#a5a5a5;
}
How about this: 这个怎么样:
HTML: HTML:
<ul class="dj-main"> //main menu
<li class="item1">...</li> //main menu items
<li class="item2">...</li>
<li class="item3">...</li>
<li class="item4">
<div class="submenu"> //dropdown div
<div class="part1"> //first half containing submenu
<ul class="dj-submenu"> //submenu
<li class="subitem1" data-id="1">...</li> //submenu items
<li class="subitem2 hover" data-id="2">...</li> //hovered submenu item
</ul>
</div>
// id = part2 added because of the script below
<div class="part2" id="part2">...</div> //second half containing color
</div>
</li>
</ul>
Javascript: 使用Javascript:
$('ul.dj-submenu li').each(function(){
var $this = $(this);
if ($this.hasClass('hover')) {
$('#part' + $this.data('id')).css('background-color','#a5a5a5');
}
});
Should do the trick and works with all menu items. 应该可以解决问题,并且适用于所有菜单项。 If the color is not dynamic i would prefer a pure CSS solution.
如果颜色不是动态的,我会选择纯CSS解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.