0

我在鼠标悬停时进行颜色更改和图像更改时遇到问题（使用 Jquery，或者如果可能的话使用 CSS 不会发生变化），但我遇到的问题是只有第一个元素或所有元素都发生了变化（使用 ID /CLASS 用于 deisgn 的每个元素），现在这是我的 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');
});

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

  1. 当每个人都改变颜色+背景图像
  2. 只有第一个 div ( id="button_id" class="button_id" ) 有变化。

我尝试切换并使用类/ id 但无法解决它，我也尝试使用$("#this")它仅适用于颜色（因为图像是其他 div，我也尝试使用 .children 但我不确定如何在其他 div 上设置它，我尝试了类似的方法

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

但它没有用:(

4

6 回答 6

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');
   });
});
于 2013-03-28T13:38:05.523 回答
0

尝试使用mouseenter()和mouseleave()

现场演示在这里

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');
   });
于 2013-03-28T13:32:38.340 回答
0

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

如果是这样，那可能就是问题所在——每个都id必须是独一无二的。尝试删除ids 并坚持使用类（例如JSFiddle）。

于 2013-03-28T13:40:27.087 回答
0

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

于 2013-03-28T13:40:31.720 回答
0

在您给我们的情况下，您不需要使用任何 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
        }
});
于 2013-03-28T13:42:18.563 回答
0

（首先：由于 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');

等等

于 2013-03-28T13:56:06.273 回答