将鼠标悬停在<li>上时更改SVG的路径填充

时间：2017-07-25 03:44:45

标签： html css svg

一旦有人回答我，我可能会感到非常愚蠢，但我一整天都在苦苦挣扎，我显然需要帮助。

使用WordPress的简单共享工具栏，并希望使用SVG而不是图标字体，所以我开始更多地考虑内联SVG。但现在我遇到了一个问题，因为当我将鼠标悬停在父元素上时，我不知道如何更改填充颜色。

我有以下CSS＆amp; HTML： 

/* 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;
}

.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;
}
<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.1.13 1.404 2.13 3.4 2.99.476.2.846.32 1.136.42.476.15.91.13 1.253.08.383-.06 1.178-.48 1.344-.95.17-.47.17-.86.12-.95-.05-.09-.18-.14-.38-.23M8.04 14.5h-.01c-1.18 0-2.35-.32-3.37-.92l-.24-.143-2.5.65.67-2.43-.16-.25c-.66-1.05-1.01-2.26-1.01-3.506 0-3.63 2.97-6.59 6.628-6.59 1.77 0 3.43.69 4.68 1.94 1.25 1.24 1.94 2.9 1.94 4.66-.003 3.63-2.973 6.59-6.623 6.59M13.68 2.3C12.16.83 10.16 0 8.03 0 3.642 0 .07 3.556.067 7.928c0 1.397.366 2.76 1.063 3.964L0 16l4.223-1.102c1.164.63 2.474.964 3.807.965h.004c4.39 0 7.964-3.557 7.966-7.93 0-2.117-.827-4.11-2.33-5.608" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">WhatsApp</span></a></li>
    <li><a href="#" class="svg-icon-facebook"><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="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Facebook</span></a></li>
    <li><a href="#" class="svg-icon-pinterest"><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="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.91-1.376-3.25-3.342-3.25-2.276 0-3.61 1.71-3.61 3.47 0 .69.263 1.43.593 1.83.066.08.075.15.057.23-.06.25-.196.8-.223.91-.035.15-.115.18-.268.11C3.516 10.46 2.89 9 2.89 7.82c0-2.52 1.834-4.84 5.287-4.84 2.774 0 4.932 1.98 4.932 4.62 0 2.76-1.74 4.98-4.16 4.98-.81 0-1.57-.42-1.84-.92l-.5 1.9c-.18.698-.67 1.57-1 2.1.75.23 1.54.357 2.37.357 4.41 0 8-3.58 8-8s-3.59-8-8-8z" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Pinterest</span></a></li>
    <li><a href="#" class="svg-icon-twitter"><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="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Twitter</span></a></li>
  </ul>
</div>

如果将鼠标悬停在其中一个按钮上，边框和文字将会改变颜色，但SVG的颜色不会改变。如果我将鼠标悬停在SVG上，我可以改变颜色，但边框和文字不会改变......

有没有办法让所有人一起改变而不使用javascript或类似的东西？

1 个答案:

答案 0 :(得分：2)

发布答案以供将来参考：

要更改SVG元素的填充颜色，请使用CSS fill属性。

/* 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;
}

/* Changing 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.1.13 1.404 2.13 3.4 2.99.476.2.846.32 1.136.42.476.15.91.13 1.253.08.383-.06 1.178-.48 1.344-.95.17-.47.17-.86.12-.95-.05-.09-.18-.14-.38-.23M8.04 14.5h-.01c-1.18 0-2.35-.32-3.37-.92l-.24-.143-2.5.65.67-2.43-.16-.25c-.66-1.05-1.01-2.26-1.01-3.506 0-3.63 2.97-6.59 6.628-6.59 1.77 0 3.43.69 4.68 1.94 1.25 1.24 1.94 2.9 1.94 4.66-.003 3.63-2.973 6.59-6.623 6.59M13.68 2.3C12.16.83 10.16 0 8.03 0 3.642 0 .07 3.556.067 7.928c0 1.397.366 2.76 1.063 3.964L0 16l4.223-1.102c1.164.63 2.474.964 3.807.965h.004c4.39 0 7.964-3.557 7.966-7.93 0-2.117-.827-4.11-2.33-5.608" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">WhatsApp</span></a></li>
    <li><a href="#" class="svg-icon-facebook"><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="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Facebook</span></a></li>
    <li><a href="#" class="svg-icon-pinterest"><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="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.91-1.376-3.25-3.342-3.25-2.276 0-3.61 1.71-3.61 3.47 0 .69.263 1.43.593 1.83.066.08.075.15.057.23-.06.25-.196.8-.223.91-.035.15-.115.18-.268.11C3.516 10.46 2.89 9 2.89 7.82c0-2.52 1.834-4.84 5.287-4.84 2.774 0 4.932 1.98 4.932 4.62 0 2.76-1.74 4.98-4.16 4.98-.81 0-1.57-.42-1.84-.92l-.5 1.9c-.18.698-.67 1.57-1 2.1.75.23 1.54.357 2.37.357 4.41 0 8-3.58 8-8s-3.59-8-8-8z" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Pinterest</span></a></li>
    <li><a href="#" class="svg-icon-twitter"><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="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Twitter</span></a></li>
  </ul>
</div>

相关问题
最新问题