Ways to incorporate multiple colors within a single HTML link

When attempting to utilize different colors within the same HTML link, an issue arises where the underline is drawn with only a single color upon hovering over the link with the mouse.

The following HTML and CSS code is being used:

body {
  background: #E7CEAF;
}

a {
  color: white;
  background: darkred;
  text-decoration: none;
}

a:hover {
  color: powderblue;
  text-decoration: underline;
}
  
.tag {
  font-style: italic;
  color: yellow;
}

a:hover .tag {
  text-decoration: none !important;
  /* doesn't work */
}
This is some text: <a href="https://www.example.com"><span class="tag">[this is a tag] </span>This is a link, the tag being part of the link</a>

You can experiment with it on JSFiddle.

Upon inspection, it is evident that the underline remains blue even under the yellow words. How can I modify the styling of hovering links to display a yellow underline (or eliminate the line) under the yellow portion?

htmlcss

Answer №1

Your CSS code snippet targeting a:hover .tag is functioning properly and displaying as intended, except for an issue with the link itself having an underline. To fix this, you should remove the underline from the link and apply it only to the text part.

body {
  background: #E7CEAF;
}

a {
  color: white;
  background: darkred;
  text-decoration: none;
}

a:hover {
  color: powderblue;
  text-decoration: none;
}

.tag {
  font-style: italic;
  color: yellow;
}

a:hover .tag {
  text-decoration: underline;
}

a:hover .text {
  text-decoration: underline;
}
This is some text: <a href="https://www.example.com">
<span class="tag">[this is a tag] </span>
<span class="text">This is a link, the tag being part of the link</span></a>

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

PHP function that allows toggling only the first item in an accordion

In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...

phphtmlcsswordpress

The art of placing images using CSS

I'm having trouble aligning the images into two rows of three, with the news section on the right side below the navigation bar. I've tried different methods but can't seem to get it right. Both the image and link should be clickable, but I& ...

htmlcss

What is the best way to make my submit button display a message according to my switch statements in JavaScript?

function displayMessage() { var message; var firstName= alert( switch(firstName) { case "Cherry": message="Thank You Cherry!! Your order should arrive 20 days from February 4, 2017"; break; case "Micheal": ...

javascripthtmlforms

The toggle button is unresponsive and the menu fails to slide down smoothly

When the quiz menu is clicked, it slides down to reveal four divs within a single div. Here is the fiddle link for reference: fiddle link. Below is the HTML code: Toggle button for quizzes: <ul> <li id="togglebtn"class="quizli"><a href= ...

javascripthtmlcss

Boost the height of a div in AngularJS using a sleek animation. Elevate or

I attempted to smoothly increase and decrease the height of a div using CSS animations, but I struggled due to my limited knowledge in this area. Below is the code snippet: <body ng-app="ang_app" ng-controller="ang_control01_main"> <input ty ...

cssangularjscss-animations

Is it possible to use getJSON to retrieve a value from an HTML tag ID that has already been displayed on a webpage? How about using json_decode

Is there a way to retrieve the value using the HTML tag ID after an HTML page has been rendered? For example, how can I access the date value using the td_date in my JavaScript function? Below is the code snippet that populates the data on the page: listS ...

phpjavascripthtmljson

What is the best way to animate specific table data within a table row using ng-animate?

Are you working with Angular's ng-repeat to display a table with multiple rows? Do you wish to add an animation effect to specific cells when a user hovers over a row in the table? In the scenario outlined below, the goal is to have only certain cell ...

javascripthtmlcssangularjsgsap

"Creating a form that adapts and changes based on user input

What is the process for creating a dynamic form? Hey there! How can I create a dynamic form? "Potential solution" should include: naming from '1' to '6'. ...

javascriptjqueryhtml

Extract the text without the HTML tags

I am facing a challenge where I need to extract a specific UL element from an HTML page that has the class cbs-list, while keeping all other elements within the LI tags intact. The structure of the HTML is as follows: <ul class="cbs-list"> <li> ...

jqueryhtmlsharepoint

Trouble with linking an external JavaScript file in HTML document

I'm having some trouble including an external JavaScript file in my HTML. I followed the steps but the pie chart is not showing up as expected. Can someone please take a look and let me know if I missed anything? Here's the link to where I got th ...

javascripthtml

What is the technique for rearranging columns to be at the top in Foundation for mobile devices?

On my desktop, I have a layout like this: [Column1 large-8] [Column2 large-4] For mobile view, I'd like it to be like this: [Column2 large-4] [Column1 large-8] Below is the code snippet I am working with: <div id="search-content" class="row ma ...

htmlcsszurb-foundation

Commitment of service within AngularJS controller using the "as" syntax

I'm experiencing an issue with the code snippet below. I prefer using the controller as syntax and assigning data to 'this' instead of $scope. The problem is that in this scenario, when using $scope.user everything works fine, but when tryin ...

javascripthtmlangularjs

Is there a way to programmatically retrieve the SVG rendered by D3?

I'm working on a project with a page that utilizes javascript to render a map in SVG using d3. My goal is to automatically obtain a copy of the HTML + SVG generated by this page. Simply curling the server does not work as it only returns the HTML befo ...

javascripthtmlsvgd3.jszombie.js

Ways to increase the size of a div to match the maximum height of its parent container

My current project involves using an angular dialog layout where the API to open and manage the dialog comes from a separate library. The dialog's parent container has a max-height attribute, meaning the dialog's height is determined by its conte ...

htmlcssangular

Utilize a button to apply styles to a Span element dynamically generated with JavaScript

I am attempting to spin a span generated using JavaScript when a button is clicked. The class is added to the span, but the spinning effect does not apply. <p>Click the button to create a SPAN element.</p> <button onclick="myFunction ...

javascripthtmlcss

I just obtained the height measurement of a dynamic table - now I must transfer this height value to a different element

Recently, I encountered a situation where I needed to get the height of a dynamic table using code like this: var table = document.getElementById("test"); document.write(table.offsetHeight); However, the challenge arose when I realized that I also needed ...

javascripthtmlcss

The frameset is not detecting the CSS styling

Is it typical for a frame src page to not apply the CSS that is referenced in the container page? For instance, if the external style sheet defines an id #divbody that specifies the text color, and Header.aspx contains a div with the id divbody. <!DOC ...

asp.netcss

Ways to activate a hover effect on an external element

Hello everyone! This is my first time posting here and I've been struggling to find a solution with my limited knowledge. I could really use some help on this: Is there a way to trigger a hover effect on an element that is not related (no parent, ch ...

htmlcsshover

Is there a way for me to extract and showcase the initial 10 items bearing a particular class name from a different html document on my homepage?

I am looking to extract a list of movies from an HTML file titled "movies.html". The structure of the file is as follows: <div class="movie">Content 1</div> <div class="movie">Content 2</div> <div class=" ...

javascripthtml

Aligning images within a horizontal layout

I am facing an issue with my horizontal navigation list, where I am trying to place images/icons above the text in each list item. Despite all the images being the same size, I am struggling to center them properly within the list items. Here is the HTML ...

htmlcsshtml-listsimage