无法将 SVG 图像和文本悬停在 div 内 [重复]

Posted 2023-05-08

【中文标题】无法将 SVG 图像和文本悬停在 div 内 [重复]

【英文标题】：Cannot hover SVG image and text inside a div [duplicate]

【发布时间】：2018-08-15 06:26:08

【问题描述】：

我有一个带有几个菜单项的侧边栏。每个项目都是一个<div>，由<h4> 中的SVG 图像和文本组成。当我将鼠标悬停在此项目 div 上时，我想更改它们的颜色。不幸的是，我的方法不起作用。

这是我的 html：

      <section>
        <div class="nav-flex">
          <div class="nav-icon">
            <svg   viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs></defs>
            <g id="lg/users/import" stroke="none" stroke- fill="none" fill-rule="evenodd">
              <g id="sidebar-icon">
                <path d="M16.3636364,2.72727273 L12.5590909,2.72727273 C12.1863636,1.67272727 11.1863636,0.909090909 10,0.909090909 C8.81363636,0.909090909 7.81363636,1.67272727 7.44090909,2.72727273 L3.63636364,2.72727273 C2.63181818,2.72727273 1.81818182,3.54090909 1.81818182,4.54545455 L1.81818182,17.2727273 C1.81818182,18.2772727 2.63181818,19.0909091 3.63636364,19.0909091 L16.3636364,19.0909091 C17.3681818,19.0909091 18.1818182,18.2772727 18.1818182,17.2727273 L18.1818182,4.54545455 C18.1818182,3.54090909 17.3681818,2.72727273 16.3636364,2.72727273 Z M10,2.72727273 C10.5,2.72727273 10.9090909,3.13181818 10.9090909,3.63636364 C10.9090909,4.14090909 10.5,4.54545455 10,4.54545455 C9.5,4.54545455 9.09090909,4.14090909 9.09090909,3.63636364 C9.09090909,3.13181818 9.5,2.72727273 10,2.72727273 Z M11.8181818,15.4545455 L5.45454545,15.4545455 L5.45454545,13.6363636 L11.8181818,13.6363636 L11.8181818,15.4545455 Z M14.5454545,11.8181818 L5.45454545,11.8181818 L5.45454545,10 L14.5454545,10 L14.5454545,11.8181818 Z M14.5454545,8.18181818 L5.45454545,8.18181818 L5.45454545,6.36363636 L14.5454545,6.36363636 L14.5454545,8.18181818 Z" id="Shape-Copy-4"></path>
              </g>
            </g>
          </svg>
          </div>
          <div class="content-flex">
            <h4>Опрос</h4>
          </div>
        </div>
      </section>

我的 CSS：

.nav-flex 
display: flex;
cursor: pointer;

.nav-icon 
display: inline;
height: 20px;
width: 20px;
margin: 14px 15px 14px 18px;
padding: 0;

g#sidebar-icon 
fill: #7A7A7A;

.content-flex 
display: flex;
align-items: stretch;
flex-grow: 1;

.nav-flex:hover > h4 
color: #1174F5;

.nav-flex:hover > path 
fill: #1174F5;

【参考方案1】：

从此更改您的 css 类：

.nav-flex:hover > h4 
color: #1174F5;

.nav-flex:hover > path 
fill: #1174F5;

到那个：

.nav-flex:hover h4 
color: #1174F5;

.nav-flex:hover path 
fill: #1174F5;

我给你做了个小提琴：https://jsfiddle.net/hcfr9t24/2/

【讨论】：

非常感谢！现在可以使用了。

不客气 :)

【参考方案2】：

试试这个。只需添加悬停 css .nav-icon:hover #sidebar-icon fill: #f00;

.nav-flex 
display: flex;
cursor: pointer;

.nav-icon 
display: inline;
height: 20px;
width: 20px;
margin: 14px 15px 14px 18px;
padding: 0;

g#sidebar-icon 
fill: #7A7A7A;

.content-flex 
display: flex;
align-items: stretch;
flex-grow: 1;

.nav-flex:hover > h4 
color: #1174F5;

.nav-flex:hover > path 
fill: #1174F5;

/*** hover***/
.nav-icon:hover #sidebar-icon fill: #f00;

<section>
  <div class="nav-flex">
    <div class="nav-icon">
      <svg   viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs></defs>
      <g id="lg/users/import" stroke="none" stroke- fill="none" fill-rule="evenodd">
        <g id="sidebar-icon">
          <path d="M16.3636364,2.72727273 L12.5590909,2.72727273 C12.1863636,1.67272727 11.1863636,0.909090909 10,0.909090909 C8.81363636,0.909090909 7.81363636,1.67272727 7.44090909,2.72727273 L3.63636364,2.72727273 C2.63181818,2.72727273 1.81818182,3.54090909 1.81818182,4.54545455 L1.81818182,17.2727273 C1.81818182,18.2772727 2.63181818,19.0909091 3.63636364,19.0909091 L16.3636364,19.0909091 C17.3681818,19.0909091 18.1818182,18.2772727 18.1818182,17.2727273 L18.1818182,4.54545455 C18.1818182,3.54090909 17.3681818,2.72727273 16.3636364,2.72727273 Z M10,2.72727273 C10.5,2.72727273 10.9090909,3.13181818 10.9090909,3.63636364 C10.9090909,4.14090909 10.5,4.54545455 10,4.54545455 C9.5,4.54545455 9.09090909,4.14090909 9.09090909,3.63636364 C9.09090909,3.13181818 9.5,2.72727273 10,2.72727273 Z M11.8181818,15.4545455 L5.45454545,15.4545455 L5.45454545,13.6363636 L11.8181818,13.6363636 L11.8181818,15.4545455 Z M14.5454545,11.8181818 L5.45454545,11.8181818 L5.45454545,10 L14.5454545,10 L14.5454545,11.8181818 Z M14.5454545,8.18181818 L5.45454545,8.18181818 L5.45454545,6.36363636 L14.5454545,6.36363636 L14.5454545,8.18181818 Z" id="Shape-Copy-4"></path>
        </g>
      </g>
    </svg>
    </div>
    <div class="content-flex">
      <h4>Опрос</h4>
    </div>
  </div>
</section>

【讨论】：

不幸的是，这对 h4 和我的图标都不起作用。