如何在悬停时使评论 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);
    }
})();

Answer 2

试试这个：

$('.media-user-items').on('hover', '.img_circle', function() {
    $('.active').removeClass('active');
    $(this).siblings('.user-comment').addClass('active');
});

Answer 3

使用jQuery hover 函数。

$('.user-item').hover(function() {
        $(this).addClass('active')
    },
    function() {
        $(this).removeClass('active')
    }
)