如何在悬停时激活评论 div

Question

我有 4 divs 有 4 images.when 用户将鼠标悬停在图像上评论 div 将与用户一起出现 comment.my 问题是我想做load.i 页上的第一张图片和评论 div 已激活 class 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

试试这个：

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

Answer 2

使用jQuery hover函数。

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

Answer 3

香草 javascript 解决方案，

将第一项设置为活动
为每个项目分配一个鼠标悬停事件侦听器
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);
    }
})();

如何在悬停时激活评论 div

how to make comment div active on hover

html

css

jquery

hover