Question

当我将鼠标移动到任何一个.notif类的DIV上时，我希望background颜色和border-left样式完全删除，但它在我的内部不起作用代码 - 我没有看到alert或console.log消息我将有几个具有相同类别的div - 只有悬停在其上的那个应该删除背景。

我不希望到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/

Answer 1

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

我希望帮助某人的最终代码：

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

Jquery onmouseover无法正常工作

1 个答案: