Question

我有一个隐藏的div，当鼠标悬停时我会显示。

然后当我单击文本更改并且我希望div被永久显示。问题是当鼠标移开时它会再次消失。

jQuery中有没有办法在css中覆盖鼠标隐藏？

由于

CSS

.saveCompare {
    display:none;
    margin-left: 10px;
    background-color:#BDD455;
    color:#ffffff;
    padding: 2px 8px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px; 
}

.listingContainer:hover .saveCompare {
  display: inline;
}

的jQuery

        $("div.saveCompare").click(function() {
            $(this).text('Compare Added');
            $(this).show();
            return false;
        });

Answer 1

这可能是因为“.saveCompare”中的“display：none”。 div仍然有这个类。所以它会隐藏div。也许你可以写一个新的课程：

.saveCompareNew {
    display:inline;
    margin-left: 10px;
    background-color:#BDD455;
    color:#ffffff;
    padding: 2px 8px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px; 
}

然后使用此调用删除旧课程并添加新课程

.removeClass("saveCompare").addClass("saveCompareNew")

这可能不是最佳解决方案，但它应该有效。

Answer 2

在mouseout上隐藏表单之前，请先进行检查

$('#yourElement').hover(function(){
   //show your form
},function(){
   if (!textHasChanged)
      //hide your form
});

Answer 3

据我所知，不可能在JavaScript中操纵伪类（如果我错了，请纠正我）。你可以选择像这样的全jQuery解决方案：

$('.saveCompare').hide(); //you could do this in the CSS as well    
$('.listingContainer').hover(function(){
   $(this).children('.saveCompare').show(); //on mouse over show child .saveCompare
},function(){
   $(this).children('.saveCompare').hide(); //on mouse out hide child .saveCompare
});
$('.saveCompare').click(function(){
  $(this).append('<p>Added</p>').parent('.listingContainer').unbind(); //remove parent element's hover handler when clicked and show .saveCompare forever
});

鼠标移出jQuery覆盖css隐藏

3 个答案: