Adjusting the font color when hovering over multiline text

I am currently in the process of coding a website for my job, and I am working on changing the text color when it is hovered over. However, there seems to be a break in my code causing the text not to highlight all at once. Any guidance or suggestions on how to improve this would be greatly appreciated.

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 have experimented with creating different classes based on the element, but due to being in a flexbox, the text only highlights when hovering over the entire section rather than just the text itself.

Despite trying to remove the breaks in the code with pre and white-space formatting, it has caused issues with the formatting of the header. Any assistance would be greatly appreciated. I have reviewed other solutions posted here and believe there may be an issue in my code that I have overlooked.

javascripthtmlcsshover

Answer №1

After contemplating the issue, I devised the following solution:

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

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

}
/* rest of code unchanged*/
    
<!--Remaining 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>
<!--Remaining code same-->

Answer №2

It seems like you're looking to change the color of all links in a single column when that column is hovered over, is that correct?

If so, modify the selector for your last CSS rule (the one defining the hover color) in this way:

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

This means that when hovering over a .column element, the text color of all a links inside it will change.

(Please note that I've added some background styling to ensure white text is visible when not hovered)

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to append HTML table row to designated table

I am trying to populate an HTML table with the JSON string data I receive. The object data seems correct, but for some reason, it is not getting appended to the table. Can you help me identify what's wrong with my jQuery append statement? functio ...

javascriptjqueryhtmlajax

Ways to verify if one div in jQuery contains identical text to another div

I need help with a jQuery script to remove duplicate text in div elements Here's the requirement: If div1 contains the text "hi" and div2 also contains "hi", then div2 should be removed Below is my current code snippet: <script src="https:/ ...

javascriptjqueryhtml

Submitting data from a dropdown menu using Ajax in Struts 2: A step-by-step guide

I have a select tag with the s:select element inside a form. My goal is to send a post request to the specified action using Struts 2 json plugin. I do not have much knowledge in javascript or jquery. <s:form action="selectFileType" method="post" ...

javascriptjqueryjsonstruts2

Django: Sending Templates through AJAX for Dynamic Rendering

Hey there, this is more of a theoretical question. So I recently discovered a cool trick: using AJAX to trigger a function that delivers a pre-rendered HTML template as a response, which can then be applied to a designated div element. This method feels i ...

pythonhtmldjangoajaxdjango-templates

What factors influence the timing of Chrome's spell-check feature for a particular word?

Currently, I am troubleshooting a bug in our code that is related to text input behavior. The issue at hand is that in one field, when you start typing on Chrome, the word does not get red underlined until you press space. However, in another field, Chrom ...

htmlgoogle-chromeautocorrect

Is Angular4 preloaded with bootstrap library?

I started a new angular4 project and wrote the code in app.component.html <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class ...

csstwitter-bootstrapangular

What is the correct way to add an object to a specific array in express.js?

My goal in the following function is to write a JSON file with an array of data as strings. However, the push() function, which is commented out, is causing the code to not execute as intended. Everything works fine without that line of code, but I do need ...

javascriptnode.jsjsonexpresspush

What is the recommended approach for utilizing props versus global state within your components when working with JS Frameworks such as Vue?

Currently, I am delving into a larger project using Vue and I find myself contemplating the best practices when it comes to utilizing props versus global Vuex states for accessing data within a component. To elaborate, let's say I have a component re ...

javascriptreactjsvue.jsstatevuex

Methods to modify the state of a Modal component beyond the boundaries of a React class

I am attempting to trigger my modal by modifying the state from outside of the react class. Unfortunately, I have had no success thus far. I have experimented with the following approach: In my code, I have a method named "Portfolio" that is responsible f ...

javascriptreactjsreact-modalreact-state-management

Contrasting onevent with addEventListener

After studying various DOM events, I attempted to implement the 'blur' event on the HTML body. My first attempt was with onblur document.body.onblur = () => { dosomething(); } and I also tried using AddEventListener document.body.addEven ...

javascripthtmldom

AngularJS retrieve data from JSON (like using MySQL)

My data is in JSON format: {"sectionTitle":"Account Information","sectionItems":[{"itemTitle":"Balance","url":"/account/balance","selected":true},{"itemTitle":"Account Statement","url":"/account/statementsearch","selected":false},{"itemTitle":"Deposit","u ...

javascriptmysqlangularjsjson

Using Ajax to dynamically generate column headers in Datatables

Is there a way to create a header title from an ajax file? I've been trying my best with the following code: $('#btntrack').on('click', function() { var KPNo = $('#KPNo').val(); var dataString = & ...

javascriptphpjqueryajaxdatatables

Why does a relatively positioned element always begin at the top corner of the window?

I am really struggling to understand the concept of relative versus absolute positioning, especially when dealing with parent or grandparent elements that have position values. Can someone please help me clarify these two scenarios: Case 1: grandparent ...

htmlcss

Utilizing the Global Module in NestJs: A Step-by-Step Guide

My current project is built using NestJS for the back-end. I recently discovered that in NestJS, we have the ability to create Global Modules. Here is an example of how my global module is structured: //Module import {Global, Module} from "@nestjs/commo ...

javascriptnode.jsnestjs

Guide to displaying a function result in Vue 3

I have just started learning vue js and I am facing an issue. I want to display the value returned by the following function in a table row: The function is: getGroup(id){ this.users.forEach(element =>{ if(element.id===id) ...

javascripthtmlvue.jsvuejs3

Adding a dynamic click event in HTML using IONIC 4

I've created a function using Regex to detect URL links and replace them with a span tag. The replacement process is working fine, but I'm facing an issue where when I include (click)="myFunction()" in the span, it doesn't recognize the cli ...

htmltypescriptangular7ionic4

Adjust the width of the dropdown menu to match the text input field using jQuery

Struggling with jquery-mobile to collect user information, I am facing an issue aligning the width of my select menu with the text input fields. Despite successfully matching the background and border colors of the select menu with the text input fields, ...

jqueryhtmlcssjquery-mobile

Convert string IDs from a JSON object to numerical IDs in JavaScript

My goal is to convert the IDs in a JSON object received from PHP into numeric keys using JavaScript. The initial structure of my JSON object looks like this: let foo = {"66":"test","65":"footest"}; What I aim for is to transform it into this format: let f ...

javascriptphpjson

Custom Homepage with Integrated Google Web Search and Autocomplete Feature

Is there a way to incorporate the standard Google web search with autocomplete into my own webpage, without using a custom search engine like www.google.com? I have been unable to find any examples or guides on how to accomplish this. All the resources see ...

htmlajax

Encountering unidentified data leading to the error message "Query data must be defined"

Currently, I'm utilizing Next.js to develop a project for my portfolio. In order to manage the API, I decided to implement both Tanstack query and Axios. The issue arises when attempting to retrieve the data as an error surfaces. Oddly enough, while ...

javascriptreactjsnext.jsreact-query