Adding hover to a HTML Section Element LESS

Question

I have a HTML section element which is defined as below:

<section class="sectionClass">
  <h2>
      some text
   </h2>
</section>

.sectionClass {
  h2 {
    display:none;
  }
}

Now, when the page loads the h2 is not displayed which is obvious. Now, I want that when I hover on the section the h2 is displayed and then when I dont hover then it hides. How can I do that using LESS?

UPDATE:

I added the following code but it does not show the h2 element even when I hover on the section.

.sectionClass :hover {
  h2 {
    display:block;
  }
}

Possible duplicate of [Less: how to write :hover and :focus](http://stackoverflow.com/questions/17356049/less-how-to-write-hover-and-focus) — Christoph, Nov 24 '15 at 16:09

Josh Crozier · Answer 1 · 2015-11-24T16:10:30.847

3

Add the :hover pseudo class to the parent .sectionClass:hover h2 (example).

You can achieve this by using the & operator, which essentially references the parent selector.

.sectionClass {
  &:hover {
    h2 {
      display: block;
    }
  }
  h2 {
    display:none;
  }
}

Which compiles to:

.sectionClass:hover h2 {
  display: block;
}
.sectionClass h2 {
  display: none;
}

edited Nov 24 '15 at 16:10

answered Nov 24 '15 at 16:07

Josh Crozier

233,099
56
391
304

1

Sweet! &:hover was the syntax that I was looking for! Thanks! – john doe Nov 24 '15 at 16:08
1

@johndoe this question has been asked a dozen times on SO, please use the search function next time...;) – Christoph Nov 24 '15 at 16:09
@Christoph But sometimes it's hard to search for something when you don't know what the feature is called. – Josh Crozier Nov 24 '15 at 16:11
1

I understand - however I did a plain "use :hover in less" search on google and found several SO questions regarding this topic. Well, maybe next time;) If this answer solves your problem, feel free to check it, to mark your question as solved. – Christoph Nov 24 '15 at 16:23

Adding hover to a HTML Section Element LESS

1 Answers1