Question

有一个要求，我们必须显示带有列表项的复选框，一旦我们悬停列表项（ul＆gt; li）必须高亮显示向上和向下按钮，一旦鼠标输出上下图像将被隐藏。 / p>

这是我的代码

$('#dialog1 #columns1 ul').append('<li><input type="checkbox" value="'+val+'"> ' + val + '</input><img src="Up.png"  class="idUp"/><img src="Down.png" class="idDown" /></li>');


$("#idul").children("li").each(function() {
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");                   
            $(".idUp").show();
            $(".idDown").show();
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", "#EEEEEE"); 
            $(".idUp").hide();
            $(".idDown").hide();
        });
    });

请与我分享您的想法

感谢。

Answer 1

你只需要将它添加到你的CSS中它就可以了。
.idDown{ display:none; } .idUp{ display:none; }
jsfiddle：http://jsfiddle.net/j6swqv28/1/

Answer 2

为什么你根本不使用CSS。它更简单：

http://jsfiddle.net/ifch0o1/L0mp8cp0/1/

ul > li:hover {
    background-color: #aaa;
}
ul > li > img {
    visibility: hidden;
}
ul > li:hover > img {
    visibility: visible;
}

如果您需要使用jQuery进行所有工作。

就是这样：

http://jsfiddle.net/ifch0o1/L0mp8cp0/2/

你只是忘了在追加它后隐藏图像，你的代码完全适用于它在开始时显示的那个缺点。

编辑：这只会显示鼠标悬停的li图像。

http://jsfiddle.net/ifch0o1/L0mp8cp0/3/

您只需在代码中替换它：

$("#idul").children("li").each(function() {
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");                   
            // $(".idUp").show();
            // $(".idDown").show();
            $(this).find('img').show();
            $(this).find('img').show();
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", "#EEEEEE"); 
            // $(".idUp").hide();
            // $(".idDown").hide();
            $(this).find('img').hide();
            $(this).find('img').hide();
        });
    });

如何在悬停特定列表时添加图像（li）

2 个答案: