Question

我在制作换色问题时遇到了问题。鼠标悬停时的图像更改（使用Jquery，或者使用CSS，如果可能的话，它不会遇到问题），但我有一个问题，只有第一个元素得到改变，或者所有这些（使用ID / CLASS为每个元素进行设计），现在这是我的html，以及我设计的CSS

CSS：

#button_id {
    margin: 5px;
    display: block;
}

#button_nav {
    display: inline;
}

#button_img {
    background-image: url('images/left_nav_button.gif');
    width: 11px;
    height: 11px;
    float: left;
}

HTML：

<div id="button_id" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div>

我尝试使用这样的jQuery：

$(".button_id").mouseover(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(".button_id").css('color','#0365b9');
}).mouseout(function() {
    $(".button_img").css('background-image', 'url(images/left_nav_button.gif)');
    $(".button_id").css('color','#8C8C8C');
});

我试着玩它，我遇到了两种情况：

当每个人都改变了颜色+背景图片
只有第一个div（id =“button_id”class =“button_id”）发生了变化。

我试过，切换和播放类/ id但无法解决它，我也尝试使用$("#this")它只用颜色（因为图像是其他div，我也尝试使用.children但是我不知道如何在其他div上设置它，我尝试了类似

$(this).children(("#element")).css(..)

但它不起作用：（

Answer 1

试试这个：

$(document).ready(function() {
    $(".button_id").hover(function() {
    $("#button_img", this).css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(this).css('color', '#0365b9');
}, function() {
    $(".button_img", this).css('background-image', 'url(images/left_nav_button.gif)');
    $(this).css('color', '#8C8C8C');
   });
});

Answer 2

尝试使用mouseenter()和mouseleave()

现场演示here

<强> HTML

<div id="button_1" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div><br/>
<div id="button_2" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Contact Us</div>
        <div id="clear"></div>
    </div>
</div><br/>
<div id="button_3" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Corporate Queries</div>
        <div id="clear"></div>
    </div>
</div>

<强> CSS

.button_id {
    margin: 5px;
    display: block;
    border:1px dotted red;
}


#button_nav {

    display: inline;
}

#button_img {
    background-image: url('images/left_nav_button.gif');
    width: 11px;
    height: 11px;
    float: left;
}

<强>的jQuery

    $(".button_id").mouseenter(function() {
    $("#button_img", this).css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(this).css('color', '#0365b9');
}).mouseleave(function() {
    $(".button_img", this).css('background-image', 'url(images/left_nav_button.gif)');
    $(this).css('color', '#8C8C8C');
   });

Answer 3

如果我正确理解你的问题，那么有多个<div id="button_id" class="button_id">容器......？

如果是这样，那可能是问题 - 每个id必须是唯一的。尝试删除id并坚持使用类（例如JSFiddle）。

Answer 4

我会抛弃所有这些努力并使用css精灵来做你想做的事情，不要让事情变得更难。使图像的高度恰好是悬停图像的底部高度的两倍。然后将该图像作为背景添加到您的href中，然后当用户将鼠标悬停在您的href或div上或其他适用于所有内容的任何内容时。在div之后添加：悬停在你的CSS中。将背景位置更改为底部而不是顶部。完成..如果你需要一个演示我可以为你删除一个，但简而言之这是一个精灵。

Answer 5

如果你给了我们，你不需要使用任何javascript来进行简单的悬停更改，因为你只需要在其中进行CSS更改：

CSS

.button_id {
    background: #000000 url(/path/to/image) top left no-repeat;
}
.button_id:hover {
    background: #ff0000 url(/path/to/image2) top left no-repeat;
}

HTML

<div id="button_id" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div>

如果你想做非CSS事情，那么你可以使用函数hover()：

jQuery( function($) {
    $('.button_id').hover(
        function() {
            // Do mouseover stuff here
        },
        function() {
            // Do mouseout stuff here
        }
});

Answer 6

（首先：由于ID必须是唯一的，我假设你在问题中发布的html对你的页面来说也是独一无二的）

试图找出你真正想要代码的内容 - 不要过于坦诚地说清楚它。要更改单个元素：

<div id="button_id">
      <div id="button_nav"> 
            <div id="button_img"></div>
            <div id="button_name">Employment & skills</div>
            <div id="clear"></div>
      </div>
</div>

$("#button_id").mouseover(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button_hover.gif)');
    $("#button_id").css('color','#0365b9');
}).mouseout(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button.gif)');
    $("#button_id").css('color','#8C8C8C');
});

要更改多个元素，通常使用类，但css看起来会有所不同：

.button_Class {
    /*foo*/
}

<div class="button_Class">

$(".button_Class").css('foo','bar');

等

鼠标悬停只在一个元素上（同一个类）

6 个答案: