Question 326479 in Html Question posted in
Some basic documentation can be found here.

Html – Changing text color on hover with multiline text

I’ve just started coding this website for my work and I’m trying to get the text to change color when I hover over it. I have a break in my line of code and it means that the text doesn’t highlight all at once? Any suggestions as to how I could do this better would be great.

function updatemenu() {
  if (document.getElementById('responsive-menu').checked == true) {
    document.getElementById('menu').style.borderBottomRightRadius = '0';
    document.getElementById('menu').style.borderBottomLeftRadius = '5';
  } else {
    document.getElementById('menu').style.borderRadius = '0px';
  }
}
  .column {
  flex: 20%;
  height: 130px;
  padding: 10px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
}

.container {
  display: flex;
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  text-decoration: none;
}

.container a {
  text-decoration: none;
  color: #FFFFFF;
}

a:hover {
  color: #977847;
<div class='header'>

  <div class="container">
    <span class="column">
          <a href=""> Address line one </a>
        <br>
        <a href=""> Address line two </a>
        <br>
        <br>
        <a> Follow Us: </a> <a href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f" ></i></a>
     </span>
    <div class="column">
      <a> second column </a>
      <a> This is second column of our grid system</a>
    </div>
    <div class="column">
      <a> Third column </a>
      <a> This is third column of our grid system</a>
    </div>
  </div>
</div>

I’ve tried creating different classes based on the element but because it’s in a flexbox the text doesn’t highlight when you just hover over it, but when you hover over the whole section.

I’ve tried removing the breaks in the code with pre and white-space formatting but it tends to mess up the whole header formatting. Any help is appreciated thanks. I’ve tried a lot of the other posted solutions here and just feel like my code must be messed up somewhere.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution i ended up coming up with was:

    /*rest of code the same*/
span:hover a {
    color: #977847;
    transition: 0.3s;
    
}

span:hover i {
    color: #FFFFFF;
    transition: 0.3s;

}
/* rest of code same*/
        
<!--Rest of code same-->
  <div class="container">
       <div class="column">
      <span style = "color: #977847;">
          <i class="fa-solid fa-location-dot"></i><a href=""> Address line one </a>
          <br>
          <a href=""> Address line 2 </a>
      </span>
<!--Rest of code same-->


  2. 0

    If I understand you correctly, you want all the links in one column to change color when the column is hovered?

    If yes, change the selector for your last CSS rule (the one defining the hover color) as follows:

    .column:hover a {
  color: #977847;
}

    So hovering a .column element changes the text color of all a links within it.

    (note that I added some background to make the non-hovered white text visible in the snippet)

    function updatemenu() {
  if (document.getElementById('responsive-menu').checked == true) {
    document.getElementById('menu').style.borderBottomRightRadius = '0';
    document.getElementById('menu').style.borderBottomLeftRadius = '5';
  } else {
    document.getElementById('menu').style.borderRadius = '0px';
  }
}
    body {
  background: #ccc;
}

.column {
  flex: 20%;
  height: 130px;
  padding: 10px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
}

.container {
  display: flex;
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  text-decoration: none;
}

.container a {
  text-decoration: none;
  color: #FFFFFF;
}

.column:hover a {
  color: #977847;
}
    <div class='header'>

  <div class="container">
    <span class="column">
          <a href=""> Address line one </a>
        <br>
        <a href=""> Address line two </a>
        <br>
        <br>
        <a> Follow Us: </a> <a href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f" ></i></a>
     </span>
    <div class="column">
      <a> second column </a>
      <a> This is second column of our grid system</a>
    </div>
    <div class="column">
      <a> Third column </a>
      <a> This is third column of our grid system</a>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search