悬停图像时更改文本不透明度

Posted 2023-03-06

【中文标题】悬停图像时更改文本不透明度

【英文标题】：Change text opacity when hovering a image

【发布时间】：2015-12-23 15:07:29

【问题描述】：

您好，我想在。我尝试使用它，但它不起作用：

html：

<div class="text">
        SOME TEXT
    </div>

<img src="image1.jpg" class="first-image">

CSS：

.text 
opacity: 0;


.first-image:hover 
text.opacity: 1;

【问题讨论】：

是否有任何理由阻止您更改 HTML 标记？您需要更改标记以仅使用 CSS 来执行此操作。

@hopkins-matt 我应该做些什么改变？（我可以使用 javascript 或其他任何东西，而不仅仅是 CSS）。

【参考方案1】：

如果你想像使用纯 CSS 那样做，修改下面的 sn-p：

<dic class="first-image">
 <img src="image1.jpg" />
 <div class="text">SOME TEXT</div>
</div>

..

.text 
   opacity: 0;
  

  .first-image:hover > div
     opacity: 1;
   

【参考方案2】：

使用 jQuery 监听图像上的 mouseenter 事件。当该事件被触发时，向<div class="text"> 元素添加一个类（如active），使其看起来像<div class="text active">。在 mouseenter 事件 (mouseleave) 退出时，确保删除 active 类。或者你可以直接通过jQuery修改css。

添加 css 以更改文本不透明度：.text.active opacity: 0.5;

【参考方案3】：

在jquery中，抓取图片的类，在hover上，将text类的opacity改为1。

 $('.first-image').hover(function()
  $('.text').css('opacity', '1');
 );