jQuery实战之品牌展示列表效果hover效果

这里演示一个使用jQuery实现的品牌展示列表 hover效果:HTML代码如下:

html
<ul class="brand-list">
  <li><img src="img/brand1.png" ></li>
  <li><img src="img/brand2.png" ></li>
  <li><img src="img/brand3.png" ></li>
  <li><img src="img/brand4.png" ></li>
  <li><img src="img/brand5.png" ></li>
</ul>

CSS代码如下:

css
.brand-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.brand-list li {
  position: relative;
}

.brand-list li img {
  width: 100px;
  border-radius: 10px;  
}

.brand-list li:hover .mask {
  opacity: 1;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  border-radius: 10px;
  transition: opacity 0.3s ease;
}

.mask i {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript代码如下:

js
$('.brand-list li').hover(function() {
  $(this).append('<p class="mask"><i class="fas fa-link"></i></p>') 
}, function() {
  $(this).find('.mask').remove();
});

实现效果: 当鼠标悬停在品牌图片上时,会展示一个黑色半透明的遮罩层,遮罩层的中心显示链接图标,产生提示用户点击的效果。

该效果运用了jQuery的 hover()方法绑定鼠标悬停和离开两种事件,在悬停事件中动态追加了mask遮罩层,在离开事件中移除遮罩层,产生动态效果。

jQuery的事件、动态DOM操作、CSS3的过渡效果等技术使这个简单的hover效果变得生动有趣。