Question

我需要在悬停不同的班级时更改css。以下是代码

<li class="dropdown whitedrop" id="dropdown" style="width: 229px;">
    <div class="greenStripe"></div> <a data-target="#" style="cursor: Default;margin-left: 50px;width: 180px;" class="fnd-nav-link" data-toggle="dropdown"><span id="loggedon_lable">Logged on:</span>
        <span id="loggedon_user"></span><b class="caret"></b></a>
    <ul id="whitedropdown-menu" class="whitedropdown-menu fnd-tweak-dropdown" style="">
        <li class="borderli disabledMenu"> <a tabindex="-1" style="cursor: default">My Profile</a>
        </li>
        <li class="borderli disabledMenu"> <a tabindex="-1" style="cursor: default">Settings</a>
        </li>
    </ul>
</li>

在悬停时，＆＃39; whitedropdown-menu＆＃39;我需要更改＆＃39; greenStripe＆＃39;。

的背景

我试过了，

.whitedropdown-menu:hover .greenStripe {
    background:#029f1c;
}

它实际上没有工作。但我需要它在jquery而不是css。为此，我试过，

$(".whitedropdown-menu").hover(function () {
    $(".greenStripe").css('background', '#029f1c');
});

但是一旦我盘旋，背景就会发生变化，而且当我没有徘徊时，它就不会被恢复。

请帮忙，感谢。

Answer 1

$(".whitedropdown-menu").hover(function(){
     // Function called when hover
     // Go from background1 to background2

}, function() {
   // Function called when hover end
   // Go from background2 to background1
});

.hover()

Answer 2

尝试使用鼠标输出代码：

$( ".whitedropdown-menu" ).mouseout(function() {
     $(".greenStripe").css('background','#029f1c'); //change this color to the color you want
    });

Answer 3

请尝试使用以下代码段。

$(".whitedropdown-menu").mouseout(function() {
   $(".greenStripe").css('background','#029f1c');
});

你必须再添加一个jquery事件来处理这个问题。 OnMouseOut你必须再次改变背景。

Answer 4

尝试在鼠标光标离开容器后移动样式：

$('.whitedropdown-menu').mouseout(function() {
    $('.greenStripe').css('background','none'); //replace the none with the initial background color
});

Jquery：悬停功能

4 个答案: