The bullet point image in the list does not function properly when hovering over the links within it

I'm trying to add a bullet point image to the left of a list item when hovering over a link in the list, but it doesn't seem to be working.

Here is the CSS I've attempted:

ul.navibox a:hover{
list-style-image:url(images/crown-icon.jpg);}

Any suggestions or ideas on how to make this work?

This is my current CSS:

ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-type:none;
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}

ul.navibox li a:link{
color:#ff0;
text-decoration:none;}

ul.navibox li a:visited{
color:#f00;}

ul.navibox li a:hover{
color:#f0f;
list-style-image:url(images/crown-icon.jpg);}

Here is the HTML structure:

<div id="middle_left_box"><span style="padding-left:10px">Categories</span>
<h3>accessories</h3>
<h4>Supplies:</h4>
<ul class="navibox">
<li>Pellets</li>
<li>Gas</li>
<ul>
</div>
htmlcsslisthtml-lists

Answer №1

If a Demo is not provided, it can be difficult to determine the issue at hand. Here is a possible solution you could try:

ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-image:none; /* default 'non-image' */
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}

ul.navibox li:hover{
list-style-image:url(images/crown-icon.jpg);}

ul.navibox li a:link{
color:#ff0;
text-decoration:none;}

<ul.navibox li a:visited{
color:#f00;}

ul.navibox li a:hover{
color:#f0f;
}

The previous CSS code applied the list image to the anchor link, which doesn't have that property available to it. Therefore, the hover effect should be on the list item itself.

Answer №2

To have a bullet next to an <a> tag, you will need to change the display property of the <a> tag to list-item. Then, when hovering over it, you can switch the bullet image from a transparent one to an arrow or something similar.

CSS example and DEMO:

ul.navmenu li a:link {
    color:#ff0000;
    text-decoration:none;
    display:list-item;
    list-style-position:inside;
    list-style-image:url(http://dummyimage.com/16x16/aaa/aaa&text=);
}
ul.navmenu li a:visited {
    color:#00ff00;
}
ul.navmenu li a:hover {
    color:#0000ff;
    list-style-image:url(http://dummyimage.com/16x16/ddd/333&text=->);
}

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

verify communication via javascript

I've been struggling to establish a connection using Javascript, but none of the tutorials I've tried seem to work for me. For instance, here's the code I'm working with that isn't functioning: <!DOCTYPE HTML> <html> ...

javascriptjqueryhtml

Unable to add a figcaption to a figure element that were created using the createElement method. The attempt to execute 'appendChild' on 'Node' has failed

My goal is to dynamically generate a figure element and then add a figcaption to it. var newFigure = document.createElement("figure"); var newPictureCaption = document.createElement("figcaption"); $(newPictureCaption).html(imgcaption); //this part fills t ...

javascriptjqueryhtml

Tips for displaying a div element alongside a button within a reactJS table

How can I position a div element next to a button in a ReactJS table? I have a table component where I want to display some options in a small window that closes when clicked outside. Options : https://i.sstatic.net/sT8Oi.png Action button in the table ...

javascripthtmlreactjstypescript

Using a for-loop to add HTML Ids sequentially

I'm a beginner in JavaScript and HTML, and I've been working on reading my JSON file and appending it to various HTML IDs. I was curious if there is a more efficient way of doing this using a for-loop? for(let i=0; i<5; i++){ $(`#vid${i ...

javascripthtmljson

In an environment with Internet Explorer 8, is it possible to use CSS web fonts in the WOFF file format?

Looking to use web fonts on Explorer 8 but having issues with my woff file not being applied as the font for the webpage. Any solutions to this problem? ...

css

Update the CSS styling for elements that are dynamically added to the page using the

Just started using jQuery for the first time and I'm encountering an issue. I'm trying to load content from an external element onto my page, and while it loads correctly, I'm having trouble using normal traversal methods on the loaded eleme ...

javascriptjqueryhtmlcssdom-traversal

What steps can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

javascriptcss

Is it possible to conceal a link once it has been visited?

I am trying to figure out how to remove a link from a page once it has been visited. However, I am facing privacy restrictions with the :visited pseudo-class. Is there a way to achieve this without using display: none? For example: .someclass a:link {dis ...

jqueryhtmlcss

Looking for the answer to utilize selenium for product scraping

I'm currently focused on a personal project involving parsing product names and prices. To achieve this, you can navigate to shoppingSite. After arriving at the site, click the button below the map, then click it again on the right side. Opt for the u ...

javahtmlseleniummavenscrape

Tips for creating shaped images using clip-path

Can an image be clipped to match a specific shape using the clip-path CSS property? Original Image https://i.stack.imgur.com/rYeuk.jpg Desired Result with CSS https://i.stack.imgur.com/6FYfn.png ...

htmlcssclip-path

Incorporate Identifiers into the HTML Table Markup

I recently exported an Excel spreadsheet as an HTML file, but I'm facing a challenge with the defined names of cells in the Excel file. I want to open the exported HTML file and go through the collection of defined names from the Excel file. My goal i ...

c#htmlasp.netdom

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

htmlcss

JQuery is detecting an outdated file version

Currently, I am in the process of working on a project for my Raspberry Pi that focuses on gathering network speed information and then logging it in a local webserver. The script itself is functioning perfectly fine, however, I have encountered an issue w ...

htmljquery

Align text in the center of a static container

I am facing the challenge of aligning four h4 tags in the center of their respective fixed divs, all set to width: 100% to ensure their background-color: rgba(255, 255, 255, 0.5); covers the entire browser width. Despite trying various combinations of CSS ...

htmlcsstwitter-bootstrap

What is the best way to save a JavaScript object or JSON within an HTML element using the HTML5 data attribute?

I have an anchor element and I want to store and retrieve the object within it in this specific format. <a id ="test" data-val="{key1:val1,key1:val1}"> </a> When saved in this manner, fetching it with $("#test").data('val') returns ...

javascriptjqueryjsonhtml

The datepicker in jQuery disappears beneath the footer

While using the jQuery datepicker, I encountered an issue where it gets hidden behind the footer on the page. How can I resolve this problem? I have provided a link to my code on JSFiddle I have attempted to use the datepicker with a footer, but the ...

jqueryhtml

Circular center button in the footer UI

Struggling with aligning a button in the footer perfectly? I have two icons on each side and while the UI is almost there, something seems off with the center icon's padding and shadow. I'm currently working with material-ui. Take a look at the i ...

htmlcssreactjsangularjsmaterial-ui

The browser appears to be interpreting the JavaScript file as HTML, resulting in the error message "Uncaught SyntaxError: Unexpected token '<'"

Referencing a similar unresolved question here: Browser seems to read react JS file as HTML, not JSX I am currently working on a project that is developed with Next.js, React, and Typescript. However, I am facing an issue while trying to integrate a Java ...

javascripthtmlreactjstypescriptnext.js

Tips for ensuring perfect alignment of all <TD> elements in a table

Is it possible to align table rows even if they have different content lengths? Take a look at the following fiddle: Here. Currently, the rows are vertically aligned, but I would like them to be aligned horizontally like the example below: One 1 Yes T ...

htmlalignmenthtml-table

Adjust the size of col-lg-3

Is there a way to adjust the size of my col-lg based on different screen resolutions? I'm looking for a solution that can change the size of col-lg depending on the screen resolution. For example: .col-lg-3 { /* styles for screens with 1366x768p ...

csstwitter-bootstrapbootstrap-grid