jquery - 如何使评论 div 在悬停时处于事件状态

Question

我有 4 个 div，有 4 个图像。当用户将鼠标悬停在图像上时，评论 div 将与用户评论一起出现。我的问题是我想让第一个图像处于事件状态，并且评论 div 在页面加载时处于事件状态。我已给出该 div 的事件类，但我想动态地执行它。我该怎么做。

这是我的代码:

.media-user-items {
  padding: 240px 0 0px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}
.media-user-items .user-item {
  display: inline-block;
  opacity: 0.6;
  cursor: pointer;
  white-space: normal;
  vertical-align: top;
  -webkit-transition: 0.3s ease opacity;
  -o-transition: 0.3s ease opacity;
  transition: 0.3s ease opacity
}
.media-user-items .user-item.active {
  opacity: 1
}
.media-user-items .user-item.active .user-comment {
  display: block;
}
.media-user-items .user-comment {
  display: none;
  font-size: 16px;
  left: 0;
  line-height: 30px;
  position: absolute;
  top: 80px;
  width: 100%;
}
body:not(.touch) .media-user-items .user-comment-content {
  display: inline-block;
  font-size: 22px;
  max-width: 820px;
}
.user-item:hover .user-comment {
  display: block;
}

<div class="row-fluid media-user-items">
  <div class="span6 user-item">
    <div class="user-comment">
      <div class="user-comment-content">The slice view for #TataValueHomes is awesome. Beautifully crafted engineering product. Great pitch for #SoftwareEngineers</div>
    </div>
    <img src="http://placehold.it/150x150" class="img_circle" />
    <div class="username">XYZ</div>
    <div class="userid user-item">@xyz</div>
  </div>
  <div class="span6 user-item">
    <div class="user-comment">
      <div class="user-comment-content">Drool worthy ur site truly is. Data sciences blew my mind. Showing ph no. to moving out while searching is masterclass!!</div>
    </div>
    <img src="http://placehold.it/150x150" class="img_circle" />
    <div class="username">XYZ</div>
    <div class="userid">@xyz</div>
  </div>
</div>

我怎样才能用CSS做到这一点还是需要jquery？

Answer 1

普通的 JavaScript 解决方案，

1. 将第一个元素设置为事件状态
2. 为每个元素分配一个鼠标悬停事件监听器
   1. 鼠标悬停在每个元素上时，将当前事件状态设置为非事件状态
   2. 将悬停元素设置为事件状态

为每个元素分配一个鼠标悬停事件监听器，在鼠标悬停时删除

( Demo )

(function () {
    "use strict"
    var items = document.getElementsByClassName('user-item'), item;
    items[0].className += ' active';
    for (var i = 0; item = items[i]; i++) {
        item.addEventListener('mouseover', function (e) {
            var activeItems = document.getElementsByClassName('active'), active;
            for(var x = 0; active = activeItems[x]; i++) {
                active.className = active.className.replace(' active', '');
            }
            this.className += ' active';
        }, false);
    }
})();