如何使用脚本仅隐藏一半图像？

Posted 2023-05-08

【中文标题】如何使用脚本仅隐藏一半图像？

【英文标题】：How do I hide only half of an image with a script?

【发布时间】：2020-10-09 00:04:30

【问题描述】：

我在页面上有一个 .ff-og-image-inserted 类的 img。我需要一个脚本来插入另一个类 .container-close 来隐藏这个图像的一部分，类 .ff-og-image-inserted

我的尝试：

$(".ff-og-image-inserted").addClass("container-closed");

.ff-og-image-inserted 
  overflow: auto;
  height: auto;


.ff-og-image-inserted>container-closed 
  overflow: hidden;
  width: 470px;
  height: 80px;
  background-color: black;

<div><img src="link.jpg" class="ff-og-image-inserted" /></div>

我的问题： 为什么这段代码不起作用？我知道可能还有其他解决方案，但我真的需要首先知道为什么这个解决方案不起作用，所以请提出与这个解决方案相关的建议，而不是其他解决方案。

更多信息：我可以看到图像获得了 .container-closed 类，但根本没有应用 css。我想为图像本身添加类，因为图像的父 div 没有类或 id，我无法更改，因为这些是自动发布的图像。

谢谢

【问题讨论】：

您在 CSS 中缺少 . 之前的 container-closed；但我们需要查看应用 CSS 的 html 以更好地理解问题...

我添加了应用css的html。

是的，所以，答案是正确的，> 选择器是错误的；您想要将两个类都应用于同一元素的元素。我不知道为什么你可以向图像添加类，而不是它的父 div；只需使用$(".ff-og-image-inserted").parent().addClass("container-closed");...

您能否查看图片，请附在问题后面。我尝试了使用父图像类和直接图像类，并更正了选择器 > 与 .但是即使我在父 div 中看到该类，css 也没有应用。

非常感谢。它适用于父 div 类。我要离开旧的 css，其中 .container-closed 是图像本身的一部分。如果你把它作为答案，我会投票作为解决方案。

【参考方案1】：

您正在使用 > 选择器，这意味着“直接后代 (reference)”：

.ff-og-image-inserted > container-closed 

应该是：

.ff-og-image-inserted.container-closed 

因为您想将overflow 属性应用于父容器，而不是图像本身。

//

OP 想要的是向 img 的父级添加一个类：

$('.ff-og-image-inserted').parent().addClass('container-closed');

【讨论】：

嗨。谢谢你的回答。没有父容器。我想应用于图像本身。或者更好的是，有一个父 div，但它没有类或 id，我无法更改它，因为这些是自动发布的图像。

使用overflow'裁剪'图像仅在图像位于容器内时才有效。例如，将您的 <script> 改为 $(".ff-og-image-inserted").parent().addClass("container-closed");。