Styling list items (li) on hover without using the li:

I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element.

HTML:

<ul class="main-menu">
    <li class="active"><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
</ul>

CSS:

/* MAIN MENU */
.main-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: url("../img/li.png") repeat-x; height: 56px;
}
.main-menu li {
    display: inline-block;
    color: #fff;
    height: 56px;
    background: url("../img/li.png") repeat-x; height: 56px;
    line-height: 56px;
}
.main-menu li:after {
    content: "|";
}
.main-menu li:last-child:after {
    content: "";
}
.main-menu li:hover {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu .active {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu li a {
    text-decoration: none;
    color: #d2eff3;
    padding: 10px;
}
.main-menu li a:hover {

}

JsFiddle:

Check out the JsFiddle example here

Question:

How can I prevent the li:after element from being affected by the hover effect?

(When hovering over the menu, the hover effect extends to the "|" separator. I want to disable the hover effect under the separator)

I have tried:

.main-menu li:after:hover {
    background: none;
}

But it didn't work as expected.

Thank you for your assistance!

htmlcsshoverhtml-lists

Answer №1

In my opinion, the hover effect would be more effective if applied to the link rather than the entire list element. Check out this example: http://jsfiddle.net/krasimir/fC8sb/6/

.main-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: url("...") repeat-x; height: 56px;
}
.main-menu li {
    padding: 0;
    margin: 0;
    display: inline-block;
    color: #fff;
    height: 56px;
    background: url("../img/li.png") repeat-x; 
}
.main-menu li:after {
    padding: 14px 0 0 4px;
    content: "|";
    float: right;
    display: block;
}
.main-menu li:last-child:after {
    content: "";
}
.main-menu li:hover a {
    background: url("...") repeat-x; height: 56px;
}
.main-menu .active {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu li a {
    text-decoration: none;
    color: #d2eff3;
    padding: 10px;
    display: block;
    float: left;
    padding: 16px 10px 10px 10px;
}

Answer №2

To place the `:after` element outside of the `li`, you can use the following code:

li {
    position:relative;
}

li:after {
    position:absolute;
    right:-3px;
}

Example link: http://jsfiddle.net/fC8sb/1/

Answer №3

Implement styles in this manner:

.main-menu li:hover::after  {
    background:red;
}

FIDDLE

Answer №4

To create some distance between the :after element and the li box, include position: relative; and left: a in your li:after styles.

Additionally, apply margin-right: a*2 to your li to prevent the li:after element from shifting to the next menu-item.

I hope this explanation is helpful for you.

Just to clarify: When implementing these changes, replace a and a*2 with numerical values.

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

Encountering an issue: Integrating JSON data into HTML using Angular.JS!

Having trouble transferring JSON data to HTML using Angular.JS for a programming course. The author doesn't seem to have this issue, can anyone provide some assistance? I've correctly linked Angular and added the app, but it's not working a ...

javascripthtmlangularjsjson

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

javascriptjqueryhtmljscrollpane

Gradually reveal each page as it loads while a spinner rotates in anticipation

I am attempting to create a fade-in effect for the entire page once it has finished loading, This is my current code: <script type="text/javascript"> $(window).bind("load", function() { $('#overlay').fadeOut(function() { ...

jqueryhtml

I am trying to use jQuery to dynamically change classes based on certain conditions. However, I am encountering an issue where the class of my 'home' link remains unchanged even after clicking on another link. How

How can I modify my jQuery code to achieve the following: If the 'home page' is active, then apply CSS class A (dark green color) to the 'home link'; otherwise, apply CSS class B (brown color). (In essence, I want the relevant link to ...

jquerycssfunctionhyperlinkclick

The resulting line will consist of the discovered string

Let's say there's an interesting HTML document presented below with associated line numbers: 30 - <div id="myDiv"> 31 - <span class="mySpan">Some Text</span> In this scenario, PHP is being utilized for a specific purpose: $ ...

phphtmlline-numbers

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Just a heads up: below is an example with code of how I envision my interface to look, but I'm not sure if it's valid? I've been trying to create an HTML5/CSS interface that resembles the MIRC fullscreen layout (check out the image below) a ...

csshtml

How can JavaScript be used to remove HTML tags from text while preserving a space between each line?

I found a helpful solution on Stack Overflow for removing HTML from text content. This is the method it suggests: function strip(html){ let doc = new DOMParser().parseFromString(html, 'text/html'); return doc.body.textContent || "&quo ...

javascripthtml

Easily generate a hierarchical layout in HTML with this straightforward method

I'm currently working on implementing a hierarchical tree structure for a website. I need to organize a user's projects, tasks, and sub-tasks in a visually appealing manner using HTML elements. Any suggestions or creative ideas are welcome! ...

c#htmlcssvisual-studio

Mobile-responsive iFrame content is designed to adjust and fit appropriately on

While my iframe is responsive on both mobile and website, I am facing an issue where the content overflows (both overflow X and Y) from the width and height of the iFrame. Here's the scenario: in the mobile view (simulated using Google Chrome to mimi ...

javascripthtmlcssiframe

Is the image flickering non-stop when the button is pressed?

Every time I push the button, the image on the HTML 5 canvas flickers. After investigating, it seems like the issue might be related to the ctx.clearRect(0,0,100,500) function. Any suggestions on how to fix this problem? I'm currently working on anim ...

javascripthtmlhtml5-canvashtml5-animation

Position a div element after another using the :after pseudo-element

My goal is simple to explain, but I have exhausted all my efforts trying to achieve it. I am hoping for the ★ symbol to appear immediately after the number 06 using jQuery. Any assistance would be greatly appreciated. The numbers are generated by a s ...

javascriptjqueryhtmlcss

javascript show and hide navigation bar

I am currently working on a HTML menu that includes a button to open it and an unordered list : <nav class="menu"> <button> <h1>Menu</h1> </button> <ul class="mylist" ...

javascripthtmlcss

Is the percentage width and height for setting the size of an image in html/css mobile based on the screen's dimensions?

Currently, I'm working on an Oracle Apex jmobile query project involving an HTML page that includes the following image code: <center> <img src="#WORKSPACE_IMAGES#Logo.svg" align="center"> </center> Additionally, there is CSS to st ...

jqueryhtmlcssoracle-apex

Width of flex container overflowing from relative position is at its full capacity

I'm attempting to create a horizontal line across an overflowing flex container by using an absolutely positioned child element with both the left and right set to 0. This requires the container to have a relative position to contain the absolutely po ...

htmlcssflexboxoverflow

Targeting child elements with CSS selectors

In my ecommerce software, I have a menu that I want to customize by making the main categories bold. I have attempted various methods, including the ones shown below, but I am struggling to target the correct elements (specifically those in capital letter ...

htmlcsscss-selectors

Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Is there a way to center an SVG both vertically and horizontally inside a div? The issue is that the width and height of the SVG are determined using the vx-responsive library, resulting in the following DOM structure: Edit: code has been added below < ...

csshtmlsvgflexbox

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

javascripthtmlcss

Element on webpage "Expands" When Scrolled into Visibility

After posting a question on Stack Overflow, I noticed discrepancies between the element dimensions reported by Chrome Inspector and Selenium WebDriver. While Chrome Inspector showed w = 979, h = 1961, Selenium returned dimensions of 979 and 1461 respective ...

javascripthtmlseleniumselenium-webdriverwebdriver

Modify the appearance of the elements dynamically by applying styles from the CSS file without relying on the

In my CSS file, I have the following styles: .myClass { ... } .myClass:focus { ... } Am I able to modify these styles from my code? For instance, can I change the focused style of an input element when a button is pressed? ...

jquerycss

Establish a connection to a regular socket by utilizing WebSocket technology

I am attempting to connect a client interface to a hardware device using WebSocket in a browser like Chrome. The code snippet I have been using for connection is as follows: var ws = new WebSocket("ws://127.0.0.1:13854"); ws.onopen = function() ... Howev ...

javascripthtmlgoogle-chromewebsocket