LiveWithPassion LiveWithPassion - 5 months ago 21
HTML Question

Cannot get the background color to change on mouseover

I'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.

If I remove the

<section>
prior to the
<a>
the whole block becomes a link but the background sill does not change on mouse-over. I have an identical scenario in a menu and it works, so I'm a little confused here. I'm also wondering why only the elements turn into links withing a section and it does the opposite in my sub menu. Section code below:



.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
.ch-section a {
display: block;
width: 400px;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
color: $sn-list-link-active;
}

<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>




Answer

I'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.

If I remove the prior to the the whole block becomes a link but the background sill does not change on mouse-over.

It is because you have a as child of the section, so make it parent (as I did it in a previous question you had).

.ch-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $ch-section-text;
  font-size: 13px;
  border-bottom: 1px solid $body-1px-line;
}
a .ch-section {
  display: block;
  width: 400px;
  text-decoration: none;
}
a.active .ch-section {
  font-weight: bold;
}
a:hover:not(.active) .ch-section {
  background-color: yellow;
  color: $sn-list-link-active;
}
<a href="#">
  <section class="ch-section">

    <span class="ch-section-selected not"></span>
    <img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
    <span class="ch-section-user">
      <span class="ch-section-status online"></span>
    <span class="ch-section-name">Lindset T. Peters</span>
    <span class="ch-section-location">Location, Province</span>
    </span>
    <time class="ch-section-date">8:48 AM</time>
    <i class="fa fa-e1-message-sent ch-section-message"></i>
    <span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>

  </section>
</a>