The hover effect for SVG changes is not functioning properly

Do you think this is the right method to accomplish it?

HTML

<img src="http://svgur.com/i/6FY.svg" alt="" class="bullet"><img src="http://svgur.com/i/6FY.svg" alt="" class="bullet"><img src="http://svgur.com/i/6FY.svg" alt="" class="bullet"><img src="http://svgur.com/i/6FY.svg" alt="" class="bullet"><img src="http://svgur.com/i/6FY.svg" alt="" class="bullet">
<img src="http://svgur.com/i/6FY.svg" alt="" class="bullet">

CSS

.bullet {
    width: 5em;
    padding: 0.2em;
    margin: 0.2em;
}

.bullet:hover {
    content: url('http://svgur.com/i/6F0.svg');
    width: 5em;
    padding: 0.2em;
    margin: 0.2em;
}

While it works on Codepen, it doesn't work locally or when uploaded to my own server. I tried uploading it to BitBalloon and still no luck.

Any guidance on how to resolve this? Thank you :)

css

Answer №1

Utilize the svg as a background to ensure compatibility across all browsers. Avoid using the content method, as it may not work in certain browsers (such as Firefox).

.bullet {
  width: 5em;
  height: 5em;
  display: inline-block;
  padding: 0.2em;
  margin: 0.2em;
  background-image: url(http://svgur.com/i/6FY.svg);
  background-size: cover;
}

.bullet:hover {
  background-image: url('http://svgur.com/i/6F0.svg');
}
<span class="bullet"> </span>

Answer №2

Your URL is causing the issue. The browser is attempting to load the hover image from /css/images/bullet_closed.svg, which is in the same location as where the css file is loaded, resulting in a 404 error.

To fix this, you can either add another / before the url:

content: url('/images/bullet_closed.svg');

or use the full URL:

.bullet {
width: 0.8em;
padding: 0.2em;
    margin: 0.2em;
}

.bullet:hover {
content: url('http://youthful-liskov-f16b89.bitballoon.com/images/bullet_closed.svg');
width: 0.8em;
padding: 0.2em;
  margin: 0.2em;
}
<img src="http://youthful-liskov-f16b89.bitballoon.com/images/bullet_open.svg" class="bullet">
<img src="http://youthful-liskov-f16b89.bitballoon.com/images/bullet_open.svg" class="bullet">
<img src="http://youthful-liskov-f16b89.bitballoon.com/images/bullet_open.svg" class="bullet">

UPDATE

This method may not work with FireFox. Refer to this post for more details. It's recommended to consider using javascript for a solution.

Furthermore, FireFox also encounters a 404 error for the bullet_closed.svg, so follow the advice mentioned above.

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

Position the div at the bottom of the menu container, ensuring it is not displayed on mobile devices

When I click the button on my mobile sidenav menu, it appears and disappears. I'm trying to figure out how to position <div class="mtsMenu_footer"> at the bottom of the menu. I attempted to use position: absolute; and bottom: 0; in the ...

htmlcssmenuvertical-alignment

The contents of the multi-level navigation are automatically shown as the page loads

I've implemented a multilevel dropdown menu on my website using a plugin, and it works as expected. However, there's an issue where the contents of the dropdown menu display for a brief moment while the page is loading. I tried adjusting the posi ...

javascriptjqueryhtmlcss

Creating a custom design for input outline borders using CSS3

My CSS3 code is structured as follows: input[type="text"], input[type="date"], textarea, input[type="radio"], input[type="number"], input[type="time"], input[type="password"] { background: #ffffff; /* Old browsers */ /* IE9 SVG, ne ...

htmlformscssinput

Is it possible to use calc with the display property set to table-cell?

I have created a structure using divs to mimic table elements for an entry form. My goal is to make the left column, where field labels are located, 50% wide with an additional 2 em space to accommodate an asterisk marking required fields. The right column ...

htmlcsswidth

Clear out the classes of the other children within the identical parent division

I'm currently in the process of replacing my radio circles with div elements. I've successfully implemented the functionality for selecting options by clicking on the divs, as well as highlighting the selected div. However, I'm facing trou ...

htmljquerycssradio-button

Adjust the class attribute in real-time

My image doesn't appear in the correct position when I dynamically set it using the margin-top. Below is an image with a red arrow pointing to the right, which is what I want: https://i.stack.imgur.com/ue4mY.png The CSS I have is as follows: .file ...

htmlcssangularjs

Include a border around the image on the overlay, along with a close button or link

Looking for some help with my code that opens images in an overlay div. I am struggling to add a border to the image object, as it only displays the raw image without any border. How can I modify this code to include a border around the image and also ad ...

javascriptjqueryhtmlcss

Choosing a unique font style in CSS (OTF) - How to differentiate between bold, italic, etc. when using multiple OTF files?

I'm a little confused on how to implement @font-face in my current project. The client handed over multiple font files including FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, and more. My usual approach wou ...

cssfont-face

Malfunctioning JavaScript timepiece

I am currently experimenting with using Raphael to create a unique clock feature on my website. My goal is to animate the seconds hand to mimic the movement of a traditional clock. Below is the code snippet I have implemented: window.onload = function( ...

javascripthtmlcssraphael

Is it possible to adjust the background color based on the current time of day?

I have successfully designed a visually appealing website using HTML5, CSS, and Bootstrap. I am interested in finding a way to automatically change the background color and navigation bar selection color based on the time of day - blue during the day and d ...

javascripthtmlcssbootstrap-4

Adding margin causes Bootstrap 5 column to surpass 100vh height limit

I am experimenting with Bootstrap 5 on a simple webpage that contains one row with two columns. The left column is working correctly, but the right column is causing some issues. I want the webpage to be full-screen without any scrolling. However, whenever ...

htmlcssbootstrap-4flexboxfrontend

Animating the height property in Angular 2 with precise timing during data binding

Seeking a way to have a component called information-board that animates away after a few seconds, I decided on making it slide up as an exit animation. My plan is to achieve this using CSS animations as discussed in this thread: Angular 2 Slide Up and Dow ...

cssangular

``Modeling CSS Classes Using the Adjacent Sibling

As a coding novice, I challenged myself to rebuild my WordPress site using HTML, CSS, and JavaScript. In my quest for the best way to create a responsive navigation bar, I stumbled upon an example on W3Schools. My dilemma lies in how to handle Adjacent Cl ...

css

IItemTransform and minified files that are already in use

Summary: IItemTransform is not triggered when a minified file already exists in the same directory as the original (non-minified) file. Issue Description The problem arises due to CSS relative image references, impacting both JavaScript and CSS files when ...

asp.netcsstransformationbundling-and-minificationsystem.web.optimization

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

I have a form with a select box that transforms into a bootstrap button after the page loads. However, I am unable to set the selected value for the converted bootstrap button drop-down li. <button type="button" class="btn dropdown-toggle btn-default" ...

javascriptjqueryhtmlcsstwitter-bootstrap

The has-error class cannot be applied to certain input elements

I am currently in the process of validating some inputs within a modal: <div id="modal-section" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="m ...

javascriptjqueryhtmlcssbootstrap-4

Tips for aligning 2 columns when both table cells contain inner tables

Concerning my HTML table, cells #3 and #4 contain inner tables. I am facing an issue with aligning the rows within each table in cell #3 and cell #4 properly. Sometimes, the length of text in a row exceeds a single line, causing misalignment with the othe ...

htmlcss

Attempting to implement bootstrap-select to enhance my dropdown menu

Currently, I am in the process of developing a website using Bootstrap and have encountered an issue with a select component. Below is the code snippet: <tr> <td> <div class="textAlignCenter"> <select cl ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-select

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

My header/navigation bar div features a repeat-x background image. Within this, I have a horizontal navigation that needs to be centered over the background with a specified min-width and normal width. I want the navigation to be 80% of the full width, wi ...

htmlwidthbackground-imagecss

What is the best way to allocate the remaining space to one div while setting the first div to 20vmin?

I am facing a challenge with two div elements in my design. One of the divs has been set to have a height of 20vmin, but I am struggling to make the other div take up the remaining height. Initially, I experimented with using 80vmin for the second div, ho ...

css