Adjust SVG path filling upon hovering over an <li> element

It's been a challenge all day trying to figure this out, and I know I'll feel silly once someone explains it, but I definitely need some help.

I've been working on a simple sharing toolbar for WordPress and wanted to use SVG instead of icon fonts. So, I delved into inline-SVG and now find myself stuck as I don't know how to change the fill color when hovering over the parent element.

Here are the CSS & HTML I'm using:

/* Sharing Bar ------------------- */

.entry-sharing ul {
  margin-left: 0;
}

.entry-sharing li {
  display: inline;
}

... (truncated for brevity) ...

</pre>
<pre><code></div>

While hovering over one of the buttons, the border and text colors change, but the SVG color remains the same. I managed to change the SVG color on hover, but then the border and text do not change...

Is there a way for them all to change together without involving JavaScript or any other similar solutions?

htmlcsssvg

Answer №1

Providing the solution for future use:

To modify the fill color of an SVG element, apply the CSS fill property.

/* Customizing Sharing Bar ------------------- */

.entry-sharing ul {
  margin-left: 0;
}

.entry-sharing li {
  display: inline;
}

.entry-sharing li a {
  background-color: #fafafa;
  color: #919BA2;
  padding: 0 10px 5px;
  border-radius: 3px;
  border: 1px solid #f2f2f2;
  padding: 8px;
}

.entry-sharing .svg-icon-whatsapp:hover {
  border-color: #128c7e;
  color: #128c7e;
}

.entry-sharing .svg-icon-facebook:hover {
  border-color: #3b5998;
  color: #3b5998;
}

.entry-sharing .svg-icon-pinterest:hover {
  border-color: #bd081c;
  color: #bd081c;
}

.entry-sharing .svg-icon-twitter:hover {
  border-color: #1da1f2;
  color: #1da1f2;
}

.entry-sharing-svg-icon path {
  fill: #919BA2;
}

.entry-sharing-svg-icon,
.entry-sharing-label {
  display: inline-block;
  vertical-align: middle;
}

.entry-sharing-svg-icon {
  width: 15px;
  height: 15px;
  margin: 0 .2em .7em 0;
}

.entry-sharing-label {
  font-size: 14px;
  font-weight: 500;
}

/* Altering SVG fill color on hover */
li:hover a.svg-icon-whatsapp path {fill: #128c7e;}
li:hover a.svg-icon-facebook path { fill: #3b5998;}
li:hover a.svg-icon-pinterest path { fill: #bd081c;}
li:hover a.svg-icon-twitter path { fill: #1da1f2;}
<div class="entry-sharing">
  <ul>
    <li><a class="svg-icon-whatsapp" href="#"><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M11.665 9.588c-.2-.1-1.177-.578-1.36-.644-.182-.067-.315-.1-.448.1-.132.197-.514.643-.63.775-.116.13-.232.14-.43.05-.2-.1-.842-.31-1.602-.99-.592-.53-.99-1.18-1.107-1.38-.116-.2-.013-.31.087-.41.09-.09.2-.23.3-.35.098-.12.13-.2.198-.33.066-.14.033-.25-.017-.35-.05-.1-.448-1.08-.614-1.47-.16-.39-.325-.34-.448-.34-.115-.01-.248-.01-.38-.01-.134 0-.35.05-.532.24-.182.2-.696.68-.696 1.65s.713 1.91.812 2.05c...

</div>

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

What is the best way to retrieve child component elements from the parent for testing in Angular 2?

Currently, I am facing a challenge where I need to retrieve an element of a child component from a parent component in order to conduct testing with Karma-Jasmine. In my setup, the parent component contains a contact form which includes a username and pass ...

htmlangularunit-testingkarma-jasmine

Responsive design is achieved through the use of mobile media

I am seeking assistance with optimizing my website for mobile devices as it currently displays like the image below. Here are the solutions I have considered so far: Duplicating the 680 lines of CSS within the same document between @media only screen ta ...

htmlcssmobileresponsive-design

How can I achieve a smooth opacity transition without using jQuery?

Although I understand that JQuery offers functions for this purpose, I am interested in finding a solution using only pure javascript. Is there a way to change the CSS opacity setting over time? Perhaps utilizing a unix time stamp with millisecond precisi ...

javascriptjquerycss

Preventing jQuery-ui from adding extra classes to buttons

In my current project, I am dealing with a limited space for a button. After successfully designing the button to fit perfectly within this constraint and adding the necessary classes class="btn btn-default" (borrowed from Twitter's Bootstrap), I deci ...

cssjquery-uijquery-ui-dialog

Performing a validation on data fetched using a .load() function

I've been struggling with a persistent issue that I just can't seem to solve. So, here's the situation: I have a blog post on a CMS that I'm developing. The content is saved within a div with its own unique ID. When the user clicks an ...

javascriptphpjqueryhtmlajax

Enhance the appearance of your Vuejs application with conditional style formatting

I want to enhance a basic table by applying conditional CSS styles to the cells based on their values. For example: If area1 == 'one', then assign the td-one CSS style. <tr v-for="version in versions" :key="version.id"> < ...

javascripthtmlcssvue.jsvuejs2

The Bootstrap dropdown menu fails to display properly within the "col" element

Here is the HTML code I am working with: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-t ...

htmlcssbootstrap-4

Use Angular Js to add HTML inner elements to the table

This is my custom HTML code: <body> <div ng-app="tham" ng-controller="tham-control"> <div class="container"> <table class="table table-bordered table-striped"> <thead> ...

jqueryhtmlangularjs

I'm looking to display just the most recent post on the main page

Having trouble displaying only the most recent post on the main page instead of looping through all posts. Any help would be appreciated. Here is the view.py: def index(request): context = { 'infos': info.objects.all(), } ret ...

pythonhtmldjango

``There seems to be an issue with the functionality of the background-position attribute

I've been following a tutorial on web design from tutsplus. I have completed everything except for one issue with the HTML styling. You can see I have included height:100%, but in the original tutorial, that line was not there. If I remove it, the lay ...

htmlcssxhtmlbackgroundposition

What is the best method for transforming an HTML file into an ICS (iCal) file?

Hello there! I am interested in converting an HTML file (website) to an iCalendar file (iCal). Is this even possible? If so, how can it be achieved? Does anyone have any ideas or recommendations on how to proceed? Thank you in advance! ...

htmlconvertersicalendarrfc5545

When the content div is clicked within the overlay div, the popup will also close

I want to design a pop-up that features a container with a black background and some opacity, where the content of the popup is placed inside. Here's what I have in mind: <button (click)="showPopup = !showPopup">Open popup</button& ...

htmlcssangularjs

What is the most effective method for dynamically naming a div id and assigning a button data-bs-target using a prop in a Vue.js application with Bootstrap 5?

How to dynamically name a div id and data-bs-target with props in Vue.js I am attempting to assign dynamic identifiers to the id of a div and the data-bs-target of a button using props in order to reuse the same component multiple times on a single page w ...

javascripthtmlvue.jscarouselbootstrap-5

Contrast between action="" and action="#" attributes in HTML

There are two ways I've come across for setting a form's action attribute. #1. Using an empty string as the action attribute value: action="" #2. Specifying a hash symbol (#) as the action attribute value: action="#" What distingishes these ...

phphtmlforms

Is it better to have JavaScript and HTML in separate files or combined into a single HTML file?

Do you notice any difference when coding in both HTML and JavaScript within a single .html file compared to separating HTML code in a .html file and JavaScript code in a .js file? Does the functionality remain the same in both scenarios? For example, in t ...

javascripthtmlcompilationbrowserify

Hovering over a td tag and adding a border using CSS can cause the entire table to

While experimenting on a coding platform: <table> <tr> <td class="changeme">something</td> <td>something</td> <td>something</td> <td>something</td> < ...

htmlcsshoverborderhtml-table

Double-executing methods in a component

I have encountered an issue while trying to filter existing Worklog objects and summarize the time spent on each one in my PeriodViewTable component. The problem I am facing involves duplicate method calls. To address this, I attempted to reset the value ...

htmlangulartypescript

Guide onsetting up an Autocomplete textbox on a webpage using data from a database by utilizing a combination of Java servlet, jQuery, JSON objects, and an ajax request

Despite trying various methods, I am struggling to achieve this task. As a beginner in the realms of jQuery, JSON, and AJAX, I have written a servlet that connects to my database and fetches user IDs from a specific table. Additionally, I have designed a J ...

javajqueryhtmlajaxjson

How come the date is not showing up inside the <p> tag?

Check out this snippet of HTML code: <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstrap_4.5.0&bsol ...

javascripthtmlbootstrap-4

How can I export Table Tools as xls using Jquery?

Currently, I have a table that is being formatted using DataTables and TableTools. The issue I am facing is when attempting to export the table as an .xls file, it still exports as a .csv file instead. Strangely, the .pdf export function works flawlessly. ...

phpjavascriptjqueryhtml