jquery鼠标经过图片反转文字-前端问答-PHP中文网

jquery鼠标经过图片反转文字

PHPz

发布： 2023-05-08 20:08:06

原创

438人浏览过

随着网页的发展，动态效果已经成为设计的重要一环，而在这些效果中，图片和文字交替出现的效果尤为常见。本文介绍一种基于jquery的鼠标悬停图片反转文字的实现方法。

一、实现原理

将图片和文字放置在同一个元素容器中，通过控制CSS样式实现图片和文字的交替显示。鼠标悬停时，通过jqury实现容器中图片和文字的反转并修改CSS样式，实现动态效果。

二、实现步骤

1、创建HTML结构

首先，创建一个包含图片和文字的HTML容器，代码如下：

<div class="pic-box">
  @@##@@
  <div class="text">文字内容</div>
</div>

登录后复制

2、CSS样式调整

设置容器样式为相对定位，设置图片和文字样式为绝对定位，并通过z-index属性控制显示优先级。代码如下：

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

登录后复制

3、实现反转效果

鼠标停留容器时，图片和文字发生反转，图片透明度降低，文字透明度升高。通过jQuery实现这一效果，代码如下：

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

登录后复制

4、最终效果

完整代码如下：

<div class="pic-box">
  @@##@@
  <div class="text">文字内容</div>
</div>

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

登录后复制

效果如图所示：