Question

我有5个div个名为tile的相同类名，我会动态生成这些div个。我正在研究ASP.NET MVC项目，并基于我生成切片的模型。

我已使用jQuery https://stackoverflow.com/a/19480774

为此示例添加了这些切片的悬停方法

我的要求是，只有悬停的磁贴需要触发jQuery函数，以便特定磁贴的内容发生变化。截至目前，当我悬停任何一个tile div时，所有tile内容都会发生变化。我想这是因为所有div都有相同的类，我根据类名添加悬停事件。在jQuery中有一个小的调整，比如停止传播，或者我是否应该为每个div使用id为每个div的tile-1，并且在某种程度上在jQuery中有选择器来添加hove事件？

根据要求，我的代码是（根据答案做出改变）

$(document).ready(function () {

    var wapper;
    $(".tile").hover(function (e) { //mouse in
         // previously had wapper = (".tile-contents-wrapper");
        wapper = $(this).find(".tile-contents-wrapper");
            wapper.find("div:first-child").hide();
            wapper.find("div:last-child").show();
        },
        function (e) { //mouse out
            wapper.find("div:first-child").show();
            wapper.find("div:last-child").hide();
        });

});

我想使用CSS是不可能的，我的错误是不要提到我正在寻找使用jQuery而不是CSS的答案。

感谢您的回答。

Answer 1

您的问题是您告诉班级的所有成员更改颜色或文字。只需将内部部分更改为“this” - 悬停元素

$( ".mytile" ).hover(
    function() {
        $( this ).text(  "Hover" );
    }, function() {
        $( this ).text( "No hover");
    }
 );

JQuery hover documentation有一个类似的示例和更多信息

Answer 2

你不需要jQuery来做这件事，只需要简单的'CSS将做你想做的事情：

.test:hover {
    background-color: red;
}

View the example

Answer 3

您需要定位您的课程但使用“$（this）”以便更改班级的单个元素：

$('.group1').hover(
    function() { 
        $(this).addClass('tbl_navGroupHover'); }, 
    function() { 
        $(this).removeClass('tbl_navGroupHover'); 
});

如果您需要更改切片中的任何内容，您可能需要查看jQuery函数，例如.html()，这样您就可以动态更改其中一个切片的内部内容。

上面的CSS答案适用于您的样式，非常有用。但是，您可能有一些现有的类要应用和删除。只有CSS的方法才有效，但可能导致更多或重复的样式。

Answer 4

如果您使用的是您提供的链接中的相同代码，则向其添加悬停选择器可以解决您的问题。

$(".tile ").hover(
    function() {
        $(".tile:hover").css("background-color", "red");
    }, 
    function() {
        $(".tile ").css("background-color", "");
    }
);

在您提供链接的示例中，hover in function选择具有测试类的所有元素。这导致所有div的突出显示。但是如果添加悬停选择器，则只选择当时悬停的div。

其他建议使用纯CSS的答案也可以正常使用。

Answer 5

$(".row.signup-popup-row").hover(function() {
    $(this).css("background-color", "red");
}, function() {
    $(this).css("background-color", "");
});

div的相同类名，但一次只悬停一个

5 个答案: