Hover effect malfunctioning on the website

I am in the process of building a website using WordPress with the 2017 theme. I recently added a link to my page by inserting the following HTML code:

<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

After adding the link, I needed to remove the underline that WordPress automatically adds to links. To achieve this, I included the following CSS:

.entry-content a, .entry-summary a, .taxonomy-description a, .logged-in-as a, .comment-content a, .pingback .comment-body > a, .textwidget a, .entry-footer a:hover, .site-info a:hover {
   box-shadow: 0px 0px 0px 0px !important;
}

My current objective is to change the color of the hyperlink text when a user hovers over it. In order to accomplish this, I updated the CSS with the following code:

a:hover {
    color: black;
    background-color: transparent;
}

However, there seems to be an issue as the text color was initially set to #0000ff and while the background color changed upon hovering, the text color remained blue. I attempted to use !important and even tried changing the color to red #FF0000, but the desired effect was not achieved.

I went back to the HTML code to remove the text color altogether to test if the issue was related to conflicting styles, however, even when the text color was plain black, it did not change to red when hovered over.

Am I overlooking something crucial?

Answer №1

To adjust the appearance of the span element, you will need to modify its color either by removing the inline style that is currently dictating the color or by utilizing CSS exclusively.

For instance:

.entry-content a, .entry-summary a, .taxonomy-description a, .logged-in-as a, .comment-content a, .pingback .comment-body > a, .textwidget a, .entry-footer a:hover, .site-info a:hover {
   box-shadow: 0px 0px 0px 0px !important;
}

a:hover, a:hover span {
    color: black !important;
    background-color: transparent;
}
<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

Answer №2

Give this a shot:

Make sure to eliminate the

Then, feel free to insert span:hover

span:hover {
    color: black;
    background-color: transparent;
}

Check out the demonstration here

Answer №3

It seems the issue lies with this particular line.

<a href="www." target="_blank"><span style="color: #0000ff;">text</span></a>

Inline styling takes precedence over CSS in a separate file. You can try using the following code instead:

HTML

<a href="www." target="_blank"><span>text</span></a>

CSS

span{color:#0000FF}

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

Returning the value of a checkbox in ACF, excluding the label

In my functions.php file, I have the following code snippet: $query = new WP_Query(array( 'post_type' => 'gear', 'orderby' => 'title', 'order' => 'ASC', 'author' ...

Begin the Wordpress AJAX Login

Is there a way to trigger the code below when a user is logged out from another location due to user inactivity, similar to how wp-admin displays an AJAX login overlay if a user is logged out? I have not come across any documentation or tutorials on achiev ...

transfer the output from the second selection to the adjacent div

I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen. Here is the code I have so far: https://jsfiddle.net/hxe7wr65/ Is there a way to ach ...

Toggling display of divs with jQuery using plus and minus icons

Is it possible to use two different icons as a sprite image for when the show and hide functions are active on a div element? For instance, having a + icon displayed when showing the div, and then switching to a - icon when hiding it. The current code I ...

What other technique can I use to replace the creation of a jquery division?

I`m relatively new to all things related to web technologies and I am currently practicing and learning about them. On my practice page, I've experimented with various elements, including changing div heights based on the viewport height. Here's ...

displaying a pair of distinct elements using React techniques

I need help adding a react sticky header to my stepper component. When I try to render both components together, I encounter an error. To troubleshoot, I decided to render them separately. Surprisingly, when rendering separately, I do not get the "store is ...

How to dynamically insert elements into the HTML page using Angular

When my page first loads, it looks like this <body> <div class="col-md-12" id="dataPanes"> <div class="row dataPane"> Chunk of html elements </div> </div> <div class"col-md-12 text-right"> <input type="butt ...

Presenting CSV data in a tabular format using Angular and TypeScript

I am facing an issue with uploading a CSV file. Even though the table adjusts to the size of the dataset, it appears as if the CSV file is empty. Could this be due to an error in my code or something specific about the CSV file itself? I'm still learn ...

Using Google Maps: How can I trigger an InfoWindow to open by hovering over a link?

Trying to figure out how to make the "info window" on my map pop up when hovering over a corresponding link in the list of points. Currently, you have to click on a point to see the information. Any suggestions on how to achieve this while ensuring that al ...

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

Scraping a website where the page source doesn't match what is displayed on the browser

Imagine I'm interested in extracting marathon running time data from a specific website: Upon inspecting the webpage using Google Chrome, I noticed that the desired data is not directly visible in the page source. Although I have successfully scraped ...

Svelte's feature prevents users from inputting on Mapbox

My goal is to prevent user input when the variable cssDisableUserInput is set to true. Here's what I have within my main tags: <div id=userinput disabled={cssDisableUserInput}> <div id="map"> </div> Within my CSS, I&a ...

The left border consistently occupies any leftover space within the container

I have encountered an issue with my code where the border does not fill the empty space in the div container when there is only one item li present, but works fine if there are multiple items. The problem can be seen in the image below: https://i.sstatic. ...

Adding a unique field to a specifically tailored post type

I'm dealing with a plugin-generated component that showcases articles from a custom post type, each with the class post-id. Unfortunately, I can't modify the plugin's files in the child theme to make changes, so I have to create a custom fun ...

Is it possible to adjust the position of my React button using numerical values (##px) without success?

I'm facing an issue with positioning my button to the right. Despite my best efforts, I haven't been able to move it more than a few positions. In summary, here are the scenarios I've encountered while trying to solve this problem: When I ...

Tips for creating responsive elements with a z-index of 1 in CSS

I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them. I experimented with vh, vw, and percentages, yet when I resize my s ...

Unable to resize the div to fit the content

My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

When the child content surpasses the height of the parent, you can scroll within an overflow:visible; div

My sidebar navigation menu includes children and sub-children that are revealed on hover. You can view a simplified version of it in this jsfiddle link: https://jsfiddle.net/s096zfpd/ Although the example provided is basic, my main concern arises when the ...

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Below is the HTML and JavaScript code that I am working with: function changeResult() { x = document.getElementById("dropdown-list").value; console.log((x)); } var qq; <select id="dropdown-list" onchange="changeResult()"> <option value="4 ...