Jquery onmouseover无法正常工作

-1

当我将鼠标移到.notif类别的任何一个DIV上时，我希望background颜色和border-left样式完全移除，但它不能在我的代码中工作 - 我没有看到任何一个alert或console.log消息。
我将有几个div与同一个类 - 只有悬停的应该删除背景。Jquery onmouseover无法正常工作

我不想到toggle或hover，因为我并不想改变颜色回当用户离开再次移动自己的鼠标。背景颜色应保留为白色。

它在JS小提琴中使用.addClass()或.attr()将背景设置回白色，但该脚本在别处不起作用。我还有其他的JS/Jquery脚本可以工作，所以并不是我忘记了包含这些URL。

$(document).ready(function() { 
 
    $(".notif").mouseover(function() { 
 
    //console.log('mouseover detected!!'); 
 
    //alert('Mouse!'); 
 
    $(this).addClass("notif_read"); 
 
    //$(this).attr("style","background-color:white"); 
 
    }); 
 
});

.notif { 
 
    background: aliceblue; 
 
    border-left: darkblue; 
 
    border-left-style: solid; 
 
} 
 
.notif_read { 
 
    background: white; 
 
    border-left: none; 
 
    border-left-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="notifications container" style="width: 400px; max-height: 300px; overflow: auto;"> 
 
    <h6 style="margin-left:40px;"><div class="notification-heading">Unread Notifications</div></h6> 
 
    <hr class="notification-divider"> 
 
    <div class="notif row"> 
 
    <a href="?function=show&amp;id=47930"> 
 
     <div class="col-md-2 text-left"> 
 
     <img src="https://wb-dev.workbooks.com/resources/3AjMwETM/wb_icon_small.png" height="70px" width="70px"> 
 
     <input class="case_ref" type="hidden" value="CASE-32109"># 
 
     </div> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8 text-center text-muted">Workbooks Support updated CASE-32109</div> 
 
    </a> 
 
    </div> 
 
    <div class="notif row"> 
 
    <a href="?function=show&amp;id=47930"> 
 
     <div class="col-md-2 text-left"> 
 
     <img src="https://wb-dev.workbooks.com/resources/3AjMwETM/wb_icon_small.png" height="70px" width="70px"> 
 
     <input class="case_ref" type="hidden" value="CASE-32109"># 
 
     </div> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8 text-center text-muted">Workbooks Support updated CASE-32109</div> 
 
    </a> 
 
    </div> 
 
    </hr> 
 
</div>

的jsfiddle： http://jsfiddle.net/ha4pwd4o/3/

来源

2017-01-05 Jamie Lowe

代码工作在包括片断罚款为好。当你在“不工作”的环境中运行代码时，是否有任何控制台错误？ – Santi

没有错误...我在代码中看不到console.log或alert消息。我将用HTML来更新问题，我实际上输出了..这只是一个简化版本 –

我测试了你的代码，但没有看到任何问题。后台更改和警报工作以及控制台日志。 –

，我终于解决了这个查询！尽管上述示例按预期工作。在我的环境中，下拉菜单中的代码边。它是由AJAX动态创建的（每10分钟，我检查数据库中的新通知，动态生成HTML将其附加到现有列表） - 我想也许DOM不知道新的DIV，因此无法更改它们的onmouseover。

最后的代码，我希望可以帮助别人：

$("#notification_menu").on("mouseover", ".notif", function() { 
     console.log('mouseover detected!!'); 
     $(this).addClass('notif_read'); 
    });

来源

2017-01-06 14:13:28

Jquery onmouseover无法正常工作

回答

相关问题