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

Embedding images within written content

Is there a way to insert an image into text from a specific position without using tables? I'm looking for a method other than aligning the image "left or right". ...

htmlcss

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

Displaying data in a table using PHP echo after submitting a form

I am struggling to include a form button in my PHP echo statement to update the "status" field of a table row. Despite my efforts, I can't seem to make it work. This is the code snippet with my echo statement: while($row = mysql_fetch_array( $result ...

phphtmlmysql

Angular JS effectively prevents redundant data from being displayed to users when scrolling infinitely while also efficiently removing DOM elements for previous data

I'm currently working on implementing AngularJS Infinite Scroll without using jQuery. My goal is to display the first 3 data items when the page loads and then load the next 3 data items from a JSON array object as the user scrolls. The issue I am fac ...

javascriptcssangularjsjson

SVG is not extending to the entire viewport in mobile view

I need help with adjusting wave SVG's on my website to fill the entire viewport or screen width. Does anyone have any suggestions? To create the waves, I used a Wave SVG generator and placed them within a div element. <nav> <div> //align ...

htmlcsssvgflexboxwave

As the background image shifts, it gradually grows in size

I'm attempting to create an interesting visual effect where a background image moves horizontally and loops seamlessly, creating the illusion of an infinite loop of images. Using only HTML and CSS, I've run into an issue where the background ima ...

javascriptjqueryhtmlcss

Adjust the height value of each element to match the maximum height within a single line using only CSS

There are 3 divs styled with display:inline-block. I aim to adjust their height values so they match the highest one. The desired effect is demonstrated visually below. Is it doable using only CSS? ----- ----- ----- ----- ----- ---- ...

htmlcss

Navigating pages in tinymce editor

Currently, I have implemented TinyMCE as the editor for my PHP-based website. However, I am facing a challenge in integrating pagination within the editor. My goal is to allow users to input long content that will be displayed across multiple pages inste ...

phpjqueryhtmlcsstinymce

Instructions for turning an HTML table cell into an editable text box

Essentially, I'm looking to enable users to click on the table and edit the text within it. I found inspiration from this Js Fiddle: http://jsfiddle.net/ddd3nick/ExA3j/22/ Below is the code I've compiled based on the JS fiddle reference. I tho ...

javascriptjqueryhtmlhtml-table

What could be the reason why the border of my table displays in Firefox and Chrome, but remains hidden in Internet Explorer

I am facing an issue with getting a border to display on a table in Internet Explorer versions IE6, IE7, and IE8. The border is showing up fine in Chrome and Firefox but not in the mentioned IE versions. Below is the CSS code that I have been using: #info ...

htmlcssinternet-explorerfirefox

What is the best way to manage DOM modifications in a responsive design layout?

Developing a responsive website with only one breakpoint can be challenging, especially when restructuring the DOM to accommodate different screen sizes. It's important to consider not just CSS and media queries, but also how the elements are arranged ...

javascriptjquerycssdomresponsive-design

parallax scrolling can be a bit bumpy

While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...

javascriptjquerycssparallax

Difficulty adjusting image size in "layouts with overflowing images on cards."

I have encountered an issue with resizing images on my browser using a card-based layout that I found on codepen. The strange thing is, the image resizing works perfectly fine on codepen itself, but when I try to implement the same HTML and stylesheet on m ...

htmlcsslayout

Inconsistencies with Colorbox behavior in an external HTML document

Encountering a strange issue with colorbox while attempting to display a "div" element from another HTML file. The code functions perfectly, except for the final "div" in the external file. The structure of my external file is as follows; div1 img par ...

jquerycsscolorbox

Responsive design challenge

I'm currently working on a WordPress theme with a fixed header and footer on the homepage, and a vertical slider in between that includes content and images. I've made the website responsive, but I'm facing an issue where the content in the ...

htmlcssresponsive-designscrollcss-position

Enhancing Visuals with src="imageUrl within Html"

Is there a way to customize the appearance of images that are fetched from an API imageUrl? I would like to create some space between the columns but when the images are displayed on a medium to small screen, they appear too close together with no spacing. ...

htmlangulartypescriptbootstrap-4sass

PyQt TreeView scrollbar obstructing the header

I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...

pythoncsspyqt

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

What are some more efficient methods for implementing page location detection with Angular directives?

My website currently features a navigation bar with 4 anchor links that direct users to different sections of the page. As you scroll down the page, the corresponding link on the nav bar lights up to signify your position on the site. Experience it yourse ...

javascriptjqueryhtmlcssangularjs

Jquery failing to function properly when scrolling

I have been attempting to implement a feature where an element changes its position to fixed after scrolling past a certain point. However, no change occurs when I scroll. In the <head> section of my code, I have included <script src="stiler/jquer ...

jqueryhtmlcss