Question

我有4个div有4个图像。当用户将鼠标悬停在图像上时，评论div将出现用户评论。我的问题是我想让第一个图像处于活动状态并且评论div在页面加载时有效。我已经给出了这个div的活跃类，但我想动态地做。我可以这样做。

这是我的代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我怎么能用css做或者我需要jquery ??

Answer 1

vanilla javascript解决方案，

将第一项设为有效
为每个项目分配一个mouseover事件侦听器
1. 在每个项目的鼠标悬停时，将当前活动设置为非活动
2. 将悬停的项目设置为有效

为每个项目分配一个mouseover事件监听器，在mouseover上删除

（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')
    }
)

如何在悬停

3 个答案: