Question

有没有办法可以对项目列表应用悬停效果？我有以下列表：

<ul>
    @foreach (var item in Model)
    {
        <li style="list-style-type:none;">
            <div class="listItem">
                <strong>Date: </strong>@Html.ActionLink(item.EventDate.ToLongDateString() + " " + item.EventDate.ToLongTimeString(), "Details", new { id = item.Id }, null)
                <br />
                <strong>Owner: </strong>@Html.DisplayFor(modelItem => item.User.Username)
                <br />
                @Html.ActionLink("Ideas List", "GetEventIdeas", new { controller = "Ideas", id = item.Id })
            </div>
        </li>
    }
</ul>

我有一个jquery如下：

$(document).ready(function () {
    $(".listItem").hover(function (e) {
        alert("Hover");
    });
});

当我将鼠标悬停在列表中的第一个元素上时，警报才会出现。而且这是第一次。为什么这样，将hover应用到列表中的所有元素的最佳方法是什么？

Answer 1

适用于我，请参阅此codepen

检查您的控制台是否有任何错误/警告，可能是浏览器限制，阻止来自页面的多个警报。我在Firefox中测试了这个。

<ul>
<li style="list-style-type:none;">
  <div class="listItem">
    <strong>Date: </strong>Date
    <br />
    <strong>Owner: </strong>username
    <br />
  </div>
</li>
  <li style="list-style-type:none;">
  <div class="listItem">
    <strong>Date: </strong>Date
    <br />
    <strong>Owner: </strong>username
    <br />
  </div>
</li>
  <li style="list-style-type:none;">
  <div class="listItem">
    <strong>Date: </strong>Date
    <br />
    <strong>Owner: </strong>username
    <br />
  </div>
</li>
</ul>

.listItem {
  height: 200px;
  width: 200px;
  background-color: grey;
}

$('.listItem').hover(function(e) {
  alert('boo');
});

Answer 2

尝试使用鼠标悬停事件而不是悬停。

悬停仅适用于列表的第一个元素

2 个答案: