LiveWithPassion LiveWithPassion - 5 months ago 11
HTML Question

How to turn a <section> with contents into a link that changes color on hover

I have six

<sections>
that are all rows within a flexbox wrapper. Flex-direction is set to column. Each
<section>
(row) has 3
<spans>
, one
<img>
, one
<i>
and a
<time>
element, which are aligned within each
<section>
using position relative/absolute, using distances from the edges of the
<section>
element. I want to make entire
<section>
a link so that when a user mouses over it, the background color changes.

What's the best way to do this? I had considered making the section an
<a>
element and displaying it as a block but am unsure if this is even possible.

<section class="conversations-history-section">
<span class="conversations-history-section-row-selected"></span>
<img class="conversations-history-section-row-image" src="assets/images/profileimg1.png" alt="img">
<span class="conversations-history-section-row-user">
<span class="conversations-history-section-row-status online"></span>
<span class="conversations-history-section-row-name active">Lucile B. Nash</span>
<span class="conversations-history-section-row-location">Vancouver, BC</span>
</span>
<time class="conversations-history-section-row-date">8:48 AM</time>
<i class="fa fa-e1-message-success conversations-history-section-row-message"> </i>
<span class="conversations-history-section-row-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</section>

.conversations-history-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $e1-conversations-history-section-text;
font-size: 13px;
border-bottom: 1px solid $e1-body-1px-line;
}

.conversations-history-section-row-selected {
position: absolute;
display: block;
width: 5px;
height: 140px;
left: 0px;
background-color: $e1-conversations-history-section-selected;
}

.conversations-history-section-row-selected.not {
background-color: $e1-conversations-history-wrapper-bg;
}

.conversations-history-section-row-user {
display: block;
position: relative;
max-width: 50%;
top: 20px;
left: 90px;
}

.conversations-history-section-row-image {
display: block;
position: absolute;
left: 29px;
top: 20px;
border-radius: 50%;
height: 46px;
width: 46px;
}

.conversations-history-section-row-status {
position: absolute;
display: block;
top: 8px;
left: 0px;
width: 8px;
height: 8px;
border-radius: 4px;
}

.conversations-history-section-row-status.online {
background-color: $e1-conversations-history-section-status-online;
}

.conversations-history-section-row-status.offline {
background-color: $e1-conversations-history-section-status-offline;
}

.conversations-history-section-row-name {
position: absolute;
display: block;
top: 0px;
left: 16px;
color: $e1-conversations-history-section-user-name;
font-weight: bold;
font-size: 13px;
}

.conversations-history-section-row-name.active {
color: $e1-conversations-history-section-user-name-active;
}

.conversations-history-section-row-location {
position: absolute;
display: block;
top: 20px;
left: 16px;
font-size: 11px;
}

.conversations-history-section-row-date {
position: absolute;
top: 20px;
right: 24px;
}

.conversations-history-section-row-message {
display: block;
position: absolute;
right: 24px;
bottom: 24px;
color: $e1-conversations-history-section-row-message;
font-size: 16px;
}

.conversations-history-section-row-message.error {
color: $e1-conversations-history-section-row-message-error;
}

.conversations-history-section-row-snippet {
display: block;
position: absolute;
width: 350px;
left: 24px;
bottom: 24px;
}

Answer

you have to wrap the section in a and most likely make that a a block level element.

a {
  /* optional */
  display: block
}
a:hover {
  background: red
}
.conversations-history-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $e1-conversations-history-section-text;
  font-size: 13px;
  border-bottom: 1px solid $e1-body-1px-line;
}
.conversations-history-section-row-selected {
  position: absolute;
  display: block;
  width: 5px;
  height: 140px;
  left: 0px;
  background-color: $e1-conversations-history-section-selected;
}
.conversations-history-section-row-selected.not {
  background-color: $e1-conversations-history-wrapper-bg;
}
<a href="#">
  <section class="conversations-history-section">
    <span class="conversations-history-section-row-selected"></span>
    <img class="conversations-history-section-row-image" src="assets/images/profileimg1.png" alt="img">
    <span class="conversations-history-section-row-user">
      <span class="conversations-history-section-row-status online"></span>
    <span class="conversations-history-section-row-name active">Lucile B. Nash</span>
    <span class="conversations-history-section-row-location">Vancouver, BC</span>
    </span>
    <time class="conversations-history-section-row-date">8:48 AM</time>
    <i class="fa fa-e1-message-success conversations-history-section-row-message">   </i>
    <span class="conversations-history-section-row-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
  </section>
</a>

If you don't want to link the section anywhere, then you can just :hover the section instead without adding extra HTML.

section:hover {
  background: red
}
.conversations-history-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $e1-conversations-history-section-text;
  font-size: 13px;
  border-bottom: 1px solid $e1-body-1px-line;
}
.conversations-history-section-row-selected {
  position: absolute;
  display: block;
  width: 5px;
  height: 140px;
  left: 0px;
  background-color: $e1-conversations-history-section-selected;
}
.conversations-history-section-row-selected.not {
  background-color: $e1-conversations-history-wrapper-bg;
}
<section class="conversations-history-section">
    <span class="conversations-history-section-row-selected"></span>
    <img class="conversations-history-section-row-image" src="assets/images/profileimg1.png" alt="img">
    <span class="conversations-history-section-row-user">
      <span class="conversations-history-section-row-status online"></span>
    <span class="conversations-history-section-row-name active">Lucile B. Nash</span>
    <span class="conversations-history-section-row-location">Vancouver, BC</span>
    </span>
    <time class="conversations-history-section-row-date">8:48 AM</time>
    <i class="fa fa-e1-message-success conversations-history-section-row-message">   </i>
    <span class="conversations-history-section-row-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
  </section>