2

I have a sidebar with several menu items. Each item is a <div> that consists of SVG image and text inside <h4>. I want to change their color when I hover on this item div. Unfortunately, my approach doesn't work.

Here is my 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>

My 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;
}
Olga B
  • 513
  • 2
  • 11
  • 34

2 Answers2

3

Change your css class from this:

.nav-flex:hover > h4 {
color: #1174F5;
}
.nav-flex:hover > path {
fill: #1174F5;
}

to that:

.nav-flex:hover h4 {
color: #1174F5;
}
.nav-flex:hover path {
fill: #1174F5;
}

I've made you a fiddle: https://jsfiddle.net/hcfr9t24/2/

Tim Gerhard
  • 3,477
  • 2
  • 19
  • 40
0

Try this. Just add hover 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 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>
Saravana
  • 3,389
  • 4
  • 21
  • 37