Problem arises with the HTML/CSS tab on hover or when it is in active state

I am encountering a problem with a tab. The link is provided below for reference:

<div class="dm-main-tab-menu">
    <ul>
        <li class="Content active"><a accesskey="1" href="?content">Content</a></li>

        <li class="Objects"><a accesskey="1" href="?library">Libraries</a></li>

        <li class="Forms"><a accesskey="1" href="?applications">e-Forms</a></li>

        <li class="Reports"><a accesskey="1" href="?statistics">Statistics</a></li>

        <li class="Settings"><a accesskey="1" href="?settings">Settings</a></li>    
    </ul>
</div>

Link to jsFiddle

When hovering over the second tab labeled "Libraries," the icon is not visible, and the same issue occurs for the active tab.

If anyone could assist in resolving this issue, I would greatly appreciate it.

htmlcsstabshover

Answer №1

Swap out the following:

.dm-main-tab-menu > ul > li.Objects > a:hover {
    color: #ffffff;
    background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important;
}

With this:

.dm-main-tab-menu > ul > li.Objects > a:hover {
    color: #ffffff;
    background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important;
}

You are essentially changing the background of your Objects element to something different, which may not give you the desired outcome (based on your question). It might be better to keep it as is and utilize :active for any additional effects you want to achieve. The choice ultimately depends on your specific implementation.

Answer №2

Your code representation is shown below:

/* Library Starts */

.dm-main-tab-menu > ul > li.Objects {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png)  22px 0px no-repeat !important; // Link working fine

padding:0px 0px 9px 0px;

margin:11px 0px 0px 3px;

}

.dm-main-tab-menu > ul > li.Objects > a:hover {

color: #ffffff;

background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important; // Directory doesn't working

}

.dm-main-tab-menu > ul > li.Objects > .active {

color: #ffffff;

background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important; // Directory doesn't working
}

This is the corrected version of your code:

/* Library Starts */

.dm-main-tab-menu > ul > li.Objects {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png)  22px 0px no-repeat !important;

padding:0px 0px 9px 0px;

margin:11px 0px 0px 3px;

}

.dm-main-tab-menu > ul > li.Objects > a:hover {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important; // Replaced directory with link.

}

.dm-main-tab-menu > ul > li.Objects > .active {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important; // Replaced directory with link.
}

The issue was likely with the directory reference in the "hover and active" CSS code. By replacing the directory with a direct link, the code now works properly.

In addition, please note that you cannot use the following format:

<li class="Content active"></li> - will not work.

Class names should not contain spaces, so it's recommended to use hyphens instead like this:

<li class="Content-active"></li> - This format will work correctly.

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

Find the total sum of various spans

As a beginner in programming, I am facing a challenge that I cannot seem to solve. How can I retrieve the values of multiple spans with the same class? This is how the HTML code looks: <ul> <li> <input type="checkbox" value="30 ...

jqueryhtml

Hiding an element with display: none will prevent the hover effect from

I have integrated a CSS dropdown menu from this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button Additionally, I am utilizing jQuery .on("click", event with an AJAX call. Following the successful AJAX call, I am using the foll ...

jquerycssdisplay

How can I successfully use the Confluence REST API to publish a dynamically generated HTML table (created with PHP) without encountering the problematic HTTP

I am striving to build a page within a Confluence wiki that contains a table created using the provided REST API, which can be conveniently edited by wiki users using the WYSIWYG editor once the page is established. To achieve this, I have organized vario ...

phphtmlrestconfluenceconfluence-rest-api

Is it possible for the `position: fixed` property to interfere with mix-blend-mode, and if so, are there

Struggling to make box-shadows cooperate with different backgrounds? The traditional method involves using mix-blend-mode and adding a pseudo element behind the main one for the effect. You can see an example of this technique here (click the + icon in th ...

css

How can I turn off autocomplete in MUI textfields?

Currently, I am working with the latest version of mui. Within my user contact info form, there is a zip code field that I do not want to be auto completed if the value is null. However, despite my efforts, it continues to autocomplete with the email saved ...

javascripthtmlreactjsmaterial-ui

Tips for identifying the correct selectedIndex with multiple select elements present on one page

How can I maintain the correct selectedIndex of an HTMLSelectElement while having multiple select elements in a loop without any IDs? I am dynamically loading forms on a webpage, each containing a select element with a list of priorities. Each priority is ...

javascriptjqueryhtmlcss

Creating an email-friendly button in Outlook without using images by styling a hyperlink with padding

Presenting a basic HTML code snippet - https://jsfiddle.net/mark69_fnd/6g0L0jwc/ <body style="background-color: white; font: normal 14px Verdana"> Hello <p></p> <a style=" font: bold 11px; text-decoration: none; background-color ...

htmlemailoutlook

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...

javascriptjquerycssgoogle-code-prettify

How can I make an HTML button function with a JavaScript script?

When I click a button in an HTML file, it should trigger a function in a JavaScript file to display an alert that says "hey." However, this simple task is not working for me and I am unsure why. Java Script is enabled in my browser (Google Chrome) and I am ...

javascripthtml

What is the suitable condition necessary for optimal functionality?

Greetings all! I am a newbie in the world of development and also new to Stack Overflow. This is my maiden post seeking assistance on the following issue: $(document).ready(function() { $(".header").click(function() { if ($(".header-content"). ...

javascriptjqueryhtmlcss

The WebView displays the source HTML using the loadDataWithBaseURL method instead of showing a rendered view

I am currently working on an application that utilizes WebView to display custom HTML content. However, I am facing an issue where when I execute the following code: loadDAtaWithBaseURL(URL, "<html><h1>TEST</h1></html>", "text/htm ...

androidhtmlandroid-webview

What could be causing my webpage to freeze every time a filter button is selected?

Tasked with developing a webpage similar to Pinterest by utilizing data from a JSON response. Each JSON object contains a service_name key, which can be manual, twitter, or instagram. I made an effort to implement three filter buttons to only display the r ...

javascriptjqueryhtmlcssjson

Retrieve the content of the second <li> element using jQuery

Seeking assistance with replacing the separator symbol in a given structure. In order to proceed, I first need to identify its position. Can anyone offer guidance on how to do this? Below is the structure in question: <div> <ul> ...

jquerycsshtml-lists

jQuery for Special Characters

I am currently facing an issue with the character &gt; in my jQuery datatable. Strangely, it displays '>' correctly but when I click on a row, the character &gt; appears and I am feeling frustrated. Is there any solution to this probl ...

htmljquerydatatablespecial-charactershtml-entities

Customizing table header sort icons in PrimeNG 15.4+: A step-by-step guide

The most recent update in PrimeNG brought about a change in the way sort icons are implemented. Previously, they used an i tag with CSS classes which could be customized easily using my company's icons: https://i.sstatic.net/f0Nrq.png However, the n ...

cssangularprimengp-tableprimeicons

Troubleshooting: jQuery click event not functioning correctly with if-else statement

For some reason, I can't seem to figure out how to toggle the color of all list items with a class of "link" between blue and black. I've searched through numerous posts but still can't find a solution. Working Example: http://jsfiddle.net/ ...

jqueryhtmlif-statement

Sorting items using jQuery filter

I am working with two sortable div containers that are connected using connectWith. Both containers contain draggable items that can be moved as desired. These items have specific classes such as group1 and group2. Let's refer to the containers as con ...

javascriptjqueryhtmljquery-ui

The text beside the image is not aligning correctly to the top of the page

I am having an issue on my website where the text is not aligning with the image as desired. The parent container is aligned to the top of the page, but the text seems to be out of line. I would like the text to be in line with the image, similar to a navi ...

htmlcss

Tips for incorporating decimal numbering into lists

Is it possible to replicate this layout using HTML and CSS? 1. 1.1 1.2 2. 2.1 2.2 Can I achieve this with the <li> and <ul> tags? ...

htmlcss

What is the best way to center all of my list items so that they are aligned correctly?

I have created a spec table for the Watch 4 using this code snippet: <div class="specs"> <ul class="info"> <li>Size</li> <li>44 mm</li> </ul> </div> < ...

htmlcss