1

I would like to make changes to some pictures of my website when certain text is hovered. Specifically, when h6 inside section, inside a parent row class is hovered, I want the images inside a, inside section, inside parent with row class to get greyscaled.

I read in other threads that you could affect siblings and parents in different ways and I tried the suggested approaches but none of them worked (it may be because I am not fully understanding how it is done).

Here is some pseudo-code that explains what I want to do. Of course, it is not working because such nesting is impossible.

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

I would like to ask if what I am trying to do is possible and if so, how? A solution using JavaScript would also be accepted, but preferably only using CSS if possible.

Edit: Here is a quick fiddle: https://jsfiddle.net/pjo4yxLk/2/

I want that when I hover Field1 and Field 2, both pictures to get greyscaled.

Luis Febro
  • 1,733
  • 1
  • 16
  • 21
firsttimeoncomputer
  • 65
  • 7

3 Answers3

0

That's not the proper syntax. If H6 and A tag are inside section tag, it would be like this:

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

Since A tag is H6 tag's next sibling, you have to use + selector to call it.

M4FI4S
  • 166
  • 7
  • I don't think this is working. Please check the following fiddle (https://jsfiddle.net/pjo4yxLk/2/) and tell me if I have done something wrong. – firsttimeoncomputer Aug 19 '19 at 13:44
  • @firsttimeoncomputer you're using two section tags. Put all the content in just one section tag. H6 and A are not siblings; that's why it's not working – M4FI4S Aug 20 '19 at 06:08
0

You cannot do this unless your :hover element comes before your modified element.

It can be achieved with pure CSS if you use CSS to position the text below the image but I wouldn't advise it. You can alternatively use javascript to achieve this.

Refer to this answer: On a CSS hover event, can I change another div's styling?

I have attached code to show you what I mean

.row > section > h6:hover + a > img{
  filter: grayscale(100%); 
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<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>
    <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>
Nabeel Mehmood
  • 378
  • 1
  • 5
0

For a pure CSS solution it can be done for each image by switching the place of the h6 and a in the html and putting them back in place visualy with display: flex; flex-direction: row-reverse;.
This way your code work.

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>

But if you want both images to get grayscaled when one h6 is hovered then I think you will need 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>
Pierre-Yves Legeay
  • 638
  • 5
  • 14