Question

我想在new_r_div上更改鼠标悬停的li链接颜色为此，我在链接ID中包含了悬停类。在鼠标上应该更改元素的背景这是我的代码link，请参阅

HTML

<div id="response"> <a href="#">Response Request</a>
    <div class="new_r_div hidden">
        <ul>
            <li><a href="#" id="link">Confirm</a></li>
            <li><a href="#" id="link">Delete</a></li>
        </ul>
    </div>
</div>

的jQuery

$("#response").hover(
    function () {
        $('.new_r_div').removeClass('hidden');
    }, 
    function () {
        $('.new_r_div').addClass('hidden');
    }
);

$("#new_r_div").hover(
    function () {
        $('#link').addClass('hover');
    }, 
    function () {
        $('#link').removeClass('hover');
    }
);

CSS

.new_r_div {
    position:absolute;
    width:100px;
    height:40px;
    background:#ccc;
    overflow: hidden;
    border: solid 2px #ccc;
    background: #99CCFF;
    z-index: 9999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.hidden {
    visibility: hidden;
}
.hover {
    background:red;
}

Answer 1

＃用于选择需要使用classSelector的id。请参阅下面的代码

$(".new_r_div").hover(function(){
    $('#link').addClass('hover');
},function(){
    $('#link').removeClass('hover');
});

http://jsfiddle.net/QQvv6/9/

Answer 2

我注意到这段代码存在一些问题。它仅适用于一个a代码，因为有多个#link元素。以下代码应适用于两个锚点。

$("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});

//switched selector to only target the anchor tags
$(".new_r_div li a").hover(function(){  
    $(this).addClass('hover');  //targeting anchor tags allow us to use this
},function(){
    $(this).removeClass('hover');
});

示例：http://jsfiddle.net/QQvv6/23/

Answer 3

您的new_r_div为class而非id，因此选择器为.

试试这个

 $(".new_r_div").hover(function(){
 ....

Answer 4

假设我已正确理解你的问题，你可以单独使用CSS - 不需要jquery：

.new_r_div li:hover {
    background-color: red;
}

$("#response").hover(
    function () {
        $('.new_r_div').removeClass('hidden');
    }, 
    function () {
        $('.new_r_div').addClass('hidden');
    }
);

Updated fiddle

Answer 5

编辑： jsFiddle工作代码：http://jsfiddle.net/joquery/QQvv6/7/

您的代码中存在一些错误：

您不能拥有具有相同ID（id="link"）
new_r_div不是一个id，它是你的html
您希望将鼠标悬停在new_r_div的子项的每个列表项上。因此，您需要撰写$(".new_r_div li")而不是$(".new_r_div")

我已经更新了JavaScript：

$("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});
$(".new_r_div li").hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

Answer 6

$("#new_r_div").hover(...)

new_r_div是课程，不是id

<li><a href="#" id="link">Confirm</a></li>
<li><a href="#" id="link">Delete</a></li>

id必须是唯一的

你的例子可以在没有jquery的情况下编写：

.new_r_div:hover{
    background:red;
}

演示：http://jsfiddle.net/QQvv6/19/

<强>加了：或http://jsfiddle.net/QQvv6/27/（悬停菜单项）

Answer 7

HTML

<div id="response">
                <a href="#">Response Request</a>

<div class="new_r_div hidden">
    <ul>
        <li class="menuItem"><a href="#"  >Confirm</a></li>
        <li class="menuItem"><a href="#"  >Delete</a></li>

    </ul>
  </div>
</div>

Jquery的

$("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});

$(".menuItem").hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

Fiddle Example

Answer 8

首先：您使用了两次相同的ID“链接”。 id只能在文档中使用一次，id必须是唯一的。第二：背景颜色的属性是“背景颜色”，而不是“背景”:) 第三：你很困惑：列表容器有一个类，但你试图通过id选择。

我想这就是你想要的：

    $("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});
$(".new_r_div").find(".link").hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

改变鼠标悬停的背景

8 个答案: