鼠标经过文字显示隐藏图片css样式

鼠标经过文字显示隐藏图片css样式,js鼠标经过文字显示图片预览效果,css如何实现鼠标移至文本上显示文字或图片。jQuery鼠标经过文字显示二维码代码。

这是一个比较简单的鼠标悬停经过文本显示二维码图片js效果,鼠标离开隐藏图片,代码简洁,显示位置上下左右可自己调整,目前非常的流行,多用于网站微信、微博关注,二维码支付等。代码通过javascript来实现,文本也可以换成图标等,需要的朋友可参考下。
 在这里插入图片描述
  1、js鼠标经过文字显示图片代码参考一

<style type="text/css">
    .lmlblog{
   
    position:relative;
    width:300px;
    margin:auto;}
    .lmlblog span{
   
    position:absolute;
    z-index:990;
    
  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果想要实现鼠标经过图片显示说明文字的效果,可以使用HTMLCSS来实现。具体步骤如下: 1. 在HTML中,使用`<img>`标签插入图片,并为其添加一个`alt`属性,用于在图片无法显示显示的替代文本。 2. 在图片下方添加一个`<div>`标签,并为其设置一个固定的宽度和高度。 3. 在`<div>`标签中添加一个`<p>`标签,用于显示说明文字,初始状态下将其隐藏。 4. 使用CSS为`<div>`标签和`<p>`标签设置样式,使其位置重叠并且`<p>`标签处于隐藏状态。 5. 使用CSS的`hover`伪类,当鼠标经过图片时,将`<p>`标签的显示状态改为显示。 下面是示例代码: HTML代码: ``` <div class="image-container"> <img src="your-image-source" alt="your-image-description"> <div class="text-container"> <p>your-image-description</p> </div> </div> ``` CSS代码: ``` .image-container { position: relative; width: your-image-width; height: your-image-height; } .text-container { position: absolute; bottom: 0; left: 0; width: 100%; background-color: your-background-color; opacity: 0; transition: opacity 0.5s; } .text-container p { color: your-text-color; font-size: your-text-size; text-align: center; padding: your-text-padding; } .image-container:hover .text-container { opacity: 1; } ``` 其中,`your-image-source`为图片的地址,`your-image-description`为图片的说明文字,`your-image-width`和`your-image-height`为图片的宽度和高度,`your-background-color`为说明文字的背景色,`your-text-color`为说明文字的颜色,`your-text-size`为说明文字的大小,`your-text-padding`为说明文字的内边距。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值