When the mouse hovers, the background image of <ul> <li> tabs will disappear

I have a simple set of HTML tabs using <ul> and <li> elements with some custom CSS styles. You can view the code on jsfiddle here.

Each tab follows this structure (for more details, please refer to the linked code):

...
<li class="icons ...">
  <a href="#"></a>
<li>
...

As you can see in the code, the icon on each tab is actually set as the background image of the <li> element.

Now, my issue arises when I try to change the background color or image of the <a> element when the mouse hovers over a tab. Every time I attempt this, the hover effect ends up hiding the background image of the <li> element. How can I prevent this from happening?

----------In other words, my problem can be stated as follows:----------

Essentially, I have set a background image for the <li> element and would like to add another background image for the <a> element, which is nested within the <li>. However, when I apply both background images along with hover effects, the image for the <a> element ends up hiding the image for the <li>. How can I solve this issue?

-------------I appreciate the response from @hradac, as they have correctly understood my question.-------------

htmlcss

Answer №1

Modify the LI's background-color to showcase your A element more prominently.
This adjustment will prevent your A element's background-color from obscuring the background-image.
For a visual example, refer to http://jsfiddle.net/Pq7LC/21/

Answer №2

Make sure to delete the following section from your CSS: 

a:hover
{
    color: #ffffff;
    background-color: #990000;
}

http://jsfiddle.net/ryZ4j/2/

Answer №3

It appears that you are trying to add a background image to an <li> element and another background image to an <a> element nested inside it. However, the issue lies in the fact that there are no background images applied to the nested <a> tags. Currently, all the hover effects are set on the <li> elements.

The problem seems to be related to layering. When a background color is added to the nested <a> tags, it covers up the background image of the <li> element beneath it. Although the background images are technically present, they are not visible. To resolve this, I recommend changing the background color of the <li> on hover and keeping the background color of the <a> element transparent. This way, the background image of the <li> will remain visible.

Take a look at this example for reference: http://jsfiddle.net/vzxGr/1/

Does this solution align more closely with what you were trying to achieve?

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

Choose certain table cells that do not have an identifier or any classes assigned to them

My table has 3 rows and 3 data cells. To select the first row, first data cell, and all bold tags from it: tr + td b {} To select the second row, second data cell, and all bold tags from it: tr+tr > td+td b {} I need help selecting them without usi ...

htmlcss

Challenges in Maintaining the Integrity of HTML5 Semantic Tags (article, footer, header)

When it comes to the new layout tags in HTML5, how effectively do they degrade? What risks are involved in using them? (I'm excluding <video>-- as I've come across specific fallback code for it). For instance, consider the following snippe ...

htmlcross-browser

Adding the active class in Bootstrap can be easily achieved in CodeIgniter by using the

I am seeking guidance on how to add an active class in CodeIgniter when dividing the view into three separate files. These files include: header.php page1.php ... page10.php footer.php According to this thread, there seems to be no clear solution prov ...

phpjquerycsscodeigniter

Execute operations on element itself rather than the output of document.getElementbyId

I encountered an issue involving an HTML element with the ID of BaseGridView. When I call a function directly on this element, everything works perfectly. However, if I use document.getElementById() to retrieve the element and then call the function, it do ...

javascripthtmldevexpress

Adding CSS styles to a pre-existing table structured like a tree

Can a CSS style be applied to a pre-existing HTML table structured as a tree? For instance, in Firefox, the Bookmarks Library table is set up as a tree. Is it feasible to add a CSS style to one specific column without affecting the others? While using tr ...

htmlcssfirefox

Tips for customizing the appearance of a disabled checkbox

I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox? For example: <input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" ...

htmlcss

problem arises when I attempt to use the code individually, as well as when I incorporate it into my existing

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>App Title</title> <!-- Framework's CSS Fil ...

jqueryhtml

Utilizing local storage, store and access user's preferred layout options through a click function

Exploring the realm of localstorage for the first time, I am considering its use to store a specific ID or CLASS from my css file. This stored information would then be utilized to render a selected layout (grid/list) in the user's browser upon their ...

javascriptjqueryhtmlcsslocal-storage

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

htmlcssvideo

JavaScript Animation of Text

I have a challenge where I want to animate text's opacity in JavaScript after the user presses enter. However, I am struggling to achieve this with my current code. I can provide all of my code for you to review and help me understand why the animatio ...

javascripthtmlcssanimationtext

I want the name to be retained in storage to prevent the item from being mistakenly renamed when deleted based on its index

After pressing the "add layer" button in the box shadow generator, a new layer is added. For example, let's say I have added 3 layers (Layer 1, Layer 2, Layer 3) and then deleted Layer 2. After deletion, the remaining Layers are Layer 1 and Layer 3, b ...

javascripthtmlreactjs

To generate a new <div> element by clicking a button and then clicking on it using C# Selenium

Before clicking the button, this is the initial HTML code for the page: <div id="layerContainer"> </div> After clicking the button, the code changes as shown in the picture here I have been attempting to locate the new button, but I keep rec ...

c#htmlseleniumphantomjs

Angular 2 Date Input failing to bind to date input value

Having an issue with setting up a form as the Date input in my HTML is not binding to the object's date value, even though I am using [(ngModel)] Here is the HTML code snippet: <input type='date' #myDate [(ngModel)]='demoUser.date& ...

htmlangulartypescriptangular2-forms

Ways to efficiently update styles dynamically using css and/or javascript

I am trying to update the styles of a button when it is clicked. I initially set the style for the first element on page load, but now I need to remove those styles from the first element and apply them to the clicked button instead. I am having trouble fi ...

javascripthtmlcssknockout.js

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble: <div class="sub"> <a href="#" id="people">People</a> </div> The CSS for the "a" element is as follows: color:#999999; font-size:31px; I am attempting to use jQuery to change ...

jquerycssaddclass

Tips for converting each item within an array into its own separate element

https://i.sstatic.net/Dxj1W.pngI currently have an array of objects that I am utilizing to generate a table in Angular. The table is functioning properly and successfully displays the data. However, I now have a requirement to enable editing for each indiv ...

htmlarraysjsonangulartypescript

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

htmlcsscss-grid

Toggle the selection of a div by clicking a button in AngularJS with a toggle function

I have several div elements on a webpage. Each div contains a button! When the button is clicked for the first time: The border color of the div will change to blue (indicating the div is now selected). The "ok" button will be hidden (leaving only t ...

javascripthtmlcssangularjs

Issue with Vuetify carousel not resizing to fit the entire width and height

I am looking to create a carousel that spans the entire width and height of a viewport in my Vue.js 2 project using Vuetify. Below is the code I have so far: <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500, ...

javascripthtmlcssvue.jsvuetify.js

When an image is clicked, add the coordinates to a div

Is it possible to append the coordinates displayed when hovering over an image in a div using jQuery? You can see what I have so far in this fiddle: Fiddle Here is the jQuery code: $('.hover').mousemove(function(e){ var hovertext = ...

javascriptjqueryhtml