0

我想更改鼠标悬停在 new_r_div 上的 li 链接的颜色为此，我在链接 id 处包含了悬停类。在元素的mouseouver背景上应该改变这是我的代码链接请看

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;
}
4

8 回答 8

1

# 用于选择需要使用classSelector的id。参考以下代码

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

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

于 2013-01-28T10:08:59.577 回答
1

我注意到这段代码有一些问题。它只适用于一个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/

于 2013-01-28T10:10:47.487 回答
0

你的 new_r_div是class而不是id选择器是.

试试这个

 $(".new_r_div").hover(function(){
 ....
于 2013-01-28T10:09:35.700 回答
0

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

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

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

更新的小提琴

于 2013-01-28T10:11:00.020 回答
0

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

您的代码中有一些错误：

  1. 您不能必须具有相同 id ( id="link")的元素
  2. new_r_div不是 id 它是你的 html 中的一个类
  3. 您想将鼠标悬停在属于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');
});
于 2013-01-28T10:13:31.897 回答
0 
$("#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/（悬停菜单项）

于 2013-01-28T10:14:18.130 回答
0

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');
});

小提琴示例

于 2013-01-28T10:17:24.657 回答
0

首先：您使用了两次相同的 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');
});
于 2013-01-28T10:19:23.510 回答