0

¿Cómo puedo cambiar el atributo fill del svg al hacer hover en el elemento <a>? Hasta donde he visto solo se puede si el svg es declarado explícitamente, pero no sé si es posible cuando está en un selector ::after

.menuint-item {
    background: #444;
}
.menuint-item li a{
  color: #AAA !important;
  display: block;
  position:relative;
  text-decoration: none;
  font-family: "Oxygen";
  font-size: 13px;
  font-weight: 700;
}
.menuint-item li a:hover{
  color: #F9C017 !important;
}
.menuint-item li a::after {
    content: ' ';
    background-image: url('http://drive.google.com/uc?export=view&id=0B0we2ZlPETdKVnJONWNLUF9iODQ');
    float: right;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
}
<ul class="menuint-item">
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
</ul>

1 respuesta 1

0

Al final tuve que generar dos archivos svg idénticos, con la única diferencia de que cambié el fill color, uno blanco y otro amarillo, y en el hover cambio el archivo:

.menuint-item {
  background: #444;
}
.menuint-item li a{
  color: #AAA !important;
  display: block;
  position:relative;
  text-decoration: none;
  font-family: "Oxygen";
  font-size: 13px;
  font-weight: 700;
}
.menuint-item li a:hover{
  color: #F9C017 !important;
}
.menuint-item li a::after {
    content: ' ';
    background-image: url('http://drive.google.com/uc?export=view&id=0B0we2ZlPETdKVnJONWNLUF9iODQ');
    float: right;
    background-size: 14px 14px;
    height: 14px;
    width: 14px;
}

.menuint-item li a:hover::after {
    background-image: url('http://drive.google.com/uc?export=view&id=0B0we2ZlPETdKbnJLR0dwMEZrOGs');
}
<ul class="menuint-item">
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
  <li><a href="#">Programa</a></li>
</ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.