Моя кнопка SVG не меняет цвета, когда я наводлю на нее курсор

#html #css #svg #button #hover

#HTML #css #svg #кнопка #наведите

Вопрос:

У меня есть кнопка, внутри которой есть SVG, в моем CSS значок меняет цвет при наведении на него курсора, то же самое с SVG. Но я должен навести курсор мыши непосредственно на SVG, чтобы заполнить цветом, я новичок в SVGS, поэтому, если кто-нибудь может помочь, я приложу скриншот и код, который я использовал.

 .icon {
  cursor: pointer;
  display: flex;
  border: 1px solid rgb(187, 187, 187);
  justify-content: center;
  align-items: center;
  width: 47px;
  box-shadow: 0 0px 0px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px 3px 3px 1px;
  height: 41px;
  outline: none;
  background-color: #ffffff;
  border-left: none;
}

.icon:hover {
  background-color: #5b9e4d;
  box-shadow: 0 2px 4px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border: none;
}

.icon:active {
  background-color: #5b9e4d;
  outline: none;
}

svg:hover {
  fill: white;
}

svg {
  fill: #aaaaaa;
  text-align: center;
  right: 5px;
  cursor: pointer;
  height: 33px;
  min-width: 2px;
  margin-left: 3px;
  margin-bottom: 0px;
  width: 20px;
}

 <button type="submit" class="icon searchIcon">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>

1. Можете ли вы создать jsfiddle или codepen? Таким образом, мы можем воссоздать вашу проблему и решить ее.

2. я перейду к этому, спасибо за предложение.

3. Вот JSfiddle ( jsfiddle.net/7yvkswqj ) @BeulahAkindele

4. Эффект наведения работает на jsfiddle.

5. @BeulahAkindele проблема в том, что я хочу, чтобы svg менялся на белый при наведении курсора на любую часть кнопки. извините за путаницу.

Ответ №1:

Итак, вы нависаете над родительским объектом, но хотите изменить дочернее свойство. Таким образом, вы бы установили эффект наведения на родительский объект, а затем записали изменения в дочерний.

Вот так:

 .icon:hover svg{
  fill: white;
}

 .icon {
  cursor: pointer;
  display: flex;
  border: 1px solid rgb(187, 187, 187);
  justify-content: center;
  align-items: center;
  width: 47px;
  box-shadow: 0 0px 0px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px 3px 3px 1px;
  height: 41px;
  outline: none;
  background-color: #ffffff;
  border-left: none;
}

.icon:hover {
  background-color: #5b9e4d;
  box-shadow: 0 2px 4px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border: none;
}

.icon:active {
  background-color: #5b9e4d;
  outline: none;
}

.icon:hover svg {
  fill: white;
}

svg {
  fill: #aaaaaa;
  text-align: center;
  right: 5px;
  cursor: pointer;
  height: 33px;
  min-width: 2px;
  margin-left: 3px;
  margin-bottom: 0px;
  width: 20px;
}

 <button type="submit" class="icon searchIcon">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>

Развернуть фрагмент

1. Ничего особенного, вы можете использовать любой тип селектора для родительского и дочернего элементов. И вы не можете установить наведение курсора мыши на дочерний элемент и повлиять на родительский (вы можете с помощью CSS hack и js, но из коробки вы не можете).