Question

我有一个带有几个菜单项的侧边栏。每个项目都是<div>，由<h4>内的SVG图片和文字组成。当我将鼠标悬停在此项目div上时，我想改变它们的颜色。不幸的是，我的方法并不奏效。

这是我的HTML：

      <section>
        <div class="nav-flex">
          <div class="nav-icon">
            <svg width="18px" height="20px" 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-width="1" 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;
}

Answer 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/

Answer 2

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

即可

＆＃13;

.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;}

＆＃13;

<section>
  <div class="nav-flex">
    <div class="nav-icon">
      <svg width="18px" height="20px" 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-width="1" 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>

＆＃13;

不能将div中的SVG图像和文本悬停

2 个答案: