Question

我的图像悬停工作正常，但只有在它悬停时才会改变颜色。就像，我希望div曾经徘徊，它会改变图像。

我不想将鼠标悬停在图像本身上而只是改变，这就是它正在做的事情。

HTML：

<div class="navigation-box">                                    
        <div class="sidehead"><i class="lock"></i>header 1</div>                                
            <div class="navLinks">
                <ul class="">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>          
</div>

CSS：

.lock {
    background: url('../images/lock.png') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    margin-top:-5px;
    margin-left:5%;
}

li:hover .lock{
    background: url("../images/lock-hover.png") no-repeat center;    
}

Fiddle

在小提琴中，你会看到我在说什么。我只想让div sidehead悬停一遍，以更改lock图像。我有什么想法，我做错了什么？

Answer 1

你的选择器有点错误。

如果您希望将鼠标悬停在.sidehead div上时发生某些事情，那么您必须将悬停悬停在

上

＆＃13;

.sidehead .lock {
    background: url('http://uploadir.com/u/il2433z4') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    margin-top:-5px;
    margin-left:5%;
}
.sidehead:hover .lock {
    background: grey url("http://uploadir.com/u/4js58y48") no-repeat center;
}
.sidehead {
    border:1px solid green; /* for visual refernece */
}

＆＃13;

<div class="navigation-box">
    <div class="sidehead"><i class="lock"></i>header 1</div>
    <div class="navLinks">
        <ul class="">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

＆＃13;

Answer 2

这不起作用，因为CSS can't select a parent。当您将鼠标悬停在列表项上时，您的CSS读取时，子.lock将执行某些操作。这就是jQuery的用武之地。你可以这样写：

$('li').hover(function(){
  $('.lock').addClass('newClass');
});

CSS：

.newClass {
  background: url("../images/lock-hover.png") no-repeat center;  
}

这只是一个例子，当你将鼠标悬停在列表之外时它不会包括但它应该有助于移动。

Answer 3

您可以使用JavaScript。因此，您可以将mouseout和mouseover事件用作悬停：

$(".navigation-box").mouseover(function(){ // White image
    $(".lock").css("background"," url('http://uploadir.com/u/4js58y48') no-repeat center")
});
$(".navigation-box").mouseout(function(){ // Black image
    $(".lock").css("background"," url('http://uploadir.com/u/il2433z4') no-repeat center")
});

Here is an example。注意我改变了身体的背景颜色，因此变化很明显。

或者你可以这样做：

.navigation-box:hover > .sidehead > .lock {
    background: url("http://uploadir.com/u/4js58y48") no-repeat center;  
}

For example

Answer 4

您可以使用jQuery

轻松完成此操作

我建议给你的班级（或你的ul）

$('li').on('mouseenter mouseleave', function(e) {
    $('.lock').trigger(e.type);
});

当li悬停时，此代码将触发每个.lock对象的悬停事件（如果你想让它更精确，那就添加id和或类，但这应该是非常简单的）

在悬停时进行整体转换

4 个答案: