javascript - 文字悬停时如何更改图片的属性?

标签 javascript html css

当某些文本悬停时,我想对我网站的一些图片进行更改。具体来说,当 h6 内部部分,父行类内部悬停时,我想要 a 内部的图像,内部部分,内部具有行类的父级以进行灰度化。

我在其他线程中读到,您可能会以不同的方式影响 sibling 和 parent ,我尝试了建议的方法,但没有一个有效(可能是因为我不完全理解它是如何完成的)。

这是一些解释我想要做的伪代码。当然,它不起作用,因为这样的嵌套是不可能的。

.row > section > h6:hover {
    .row > section > a > img {
        filter: grayscale(100%);
    }
}

我想问一下我想做的事情是否可行,如果可以,怎么办?也可以接受使用 JavaScript 的解决方案,但最好尽可能仅使用 CSS。

编辑:这是一个快速的 fiddle :https://jsfiddle.net/pjo4yxLk/2/

我希望当我将 Field1 和 Field 2 悬停时,两张图片都得到灰度。

最佳答案

对于纯 CSS 解决方案,可以这样做 对于每个 图片通过切换h6的位置和 a在 html 中并使用 display: flex; flex-direction: row-reverse; 将它们视觉化地放回原位.
这样你的代码就可以工作了。

section {
  display: flex;
  flex-direction: column-reverse;
}

.row > section > h6:hover + a > img { 
  filter: grayscale(100%); 
}

.row {
 /* just to align them in a row */
  display: flex;
}

h6 {
  font-size: 16px;
}

section {
  display: flex;
  flex-direction: column-reverse;
}

.row>section>h6:hover+a>img {
  filter: grayscale(100%);
}
<div class="row container">
  <section>
    <h6>
      Field 1
    </h6>
    <a href="https://www.google.com/">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" style="width: 150px;">
    </a>
  </section>
  <section>
    <h6>
      Field 2
    </h6>
    <a href="https://www.google.com/">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" style="width: 150px;">
    </a>
  </section>
</div>


但是,如果您希望两个图像在一个 h6 悬停时都得到灰度,那么我认为您将需要 JS。
CSS
.row {
  display: flex;
}

.grayScaler {
  filter: grayscale(100%); 
}

JS
var theH6s = document.querySelectorAll(".row > section > h6");
var theImages = document.querySelectorAll("section > a > img");

function grayScaler () {
  for(let i = 0; i < theImages.length ; i++) {
        theImages[i].classList.toggle("grayScaler");
  }
}

for(let i = 0; i < theH6s.length ; i++) {
    theH6s[i].addEventListener("mouseenter",grayScaler);
  theH6s[i].addEventListener("mouseleave",grayScaler);
}

var theH6s = document.querySelectorAll(".row > section > h6");
var theImages = document.querySelectorAll("section > a > img");

function grayScaler() {
  for (let i = 0; i < theImages.length; i++) {
    theImages[i].classList.toggle("grayScaler");
  }
}

for (let i = 0; i < theH6s.length; i++) {
  theH6s[i].addEventListener("mouseenter", grayScaler);
  theH6s[i].addEventListener("mouseleave", grayScaler);
}
h6 {
  font-size: 20px;
}

.row {
  display: flex;
}

.grayScaler {
  filter: grayscale(100%);
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="row container">
  <section>
    <a href="https://www.google.com/">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" style="width: 150px;">
    </a>
    <h6>
      Field 1
    </h6>
  </section>
  <section>

    <a href="https://www.google.com/">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" style="width: 150px;">
    </a>
    <h6>
      Field 2
    </h6>
  </section>
</div>

关于javascript - 文字悬停时如何更改图片的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57557673/

相关文章:

打印时 IE 7 中的 Html 页边距

javascript - JavaScript 'bind' 方法有什么用?

html - 我该怎么做CSS CSS

jquery - 标题粘滞:子菜单未显示

html - 仅使用CSS将innerHTML设置为title属性

html - 网格图像库-宽度是自适应的,但也需要高度也要自适应

javascript - 通过“this”来提醒

JavaScript 组对象

javascript - javascript如何分配内存?

html - 打印预览词拆分到不同的页面