SVG ning kirish elementi sifatida aylanishini rangi o'zgartiradi

SVG-ni yuborish tugmasi sifatida. Men SVG-ni sichqonchani sichqoncha orqali ko'k rangga aylanishini xohlayman. Quyidagi kodim ishlamayapti. HTML

<div class="icon-cnt" id="search-icon">
  <input type="image" src="assets/images/search-fill-2.svg" border="0" alt="Submit" id="submit svg-hover"/>
</div>

Bu mening CSS

#svg-hover:hover {
  fill: blue;
}
0
id identifikatorida bo'shliqlar bo'lmasligi kerak
qo'shib qo'ydi muallif Niklas, manba
id identifikatorida bo'shliqlar bo'lmasligi kerak
qo'shib qo'ydi muallif Niklas, manba

8 javoblar

Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.svg-hover:hover {
  background: blue;
  }
<div class="icon-cnt" id="search-icon">
  <input type="image" src="http://s.cdpn.io/3/kiwi.svg" border="0" alt="Submit" id="submit" class="svg-hover"/>
</div>
</div> </div>
0
qo'shib qo'ydi

Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.svg-hover:hover {
  background: blue;
  }
<div class="icon-cnt" id="search-icon">
  <input type="image" src="http://s.cdpn.io/3/kiwi.svg" border="0" alt="Submit" id="submit" class="svg-hover"/>
</div>
</div> </div>
0
qo'shib qo'ydi

If you add svg with <input type="image"> tag, you can't change its color with CSS. Instead, you have to create svg using tag to change its color with CSS.

0
qo'shib qo'ydi

If you add svg with <input type="image"> tag, you can't change its color with CSS. Instead, you have to create svg using tag to change its color with CSS.

0
qo'shib qo'ydi
  • You should use instead of tag. For more info.
  • And you can have only one ID for an element. So id="submit svg-hover" this one will create problem.
0
qo'shib qo'ydi
  • You should use instead of tag. For more info.
  • And you can have only one ID for an element. So id="submit svg-hover" this one will create problem.
0
qo'shib qo'ydi

Sinf kabi identifikatorni ishlata olmaysiz, ID bo'sh joydan iborat bo'lgan belgilar majmui. Ikkita echimning o'rniga sinf ishlatish yoki identifikatorni o'zgartirish. Bu misolda "o'zgarmaydigan" selektorni ID o'zgarganligini tekshirishda ishlatish mumkin.

<html>
<head>
</head>
<body>
<div class="icon-cnt" id="search-icon">
  <input type="image" src="http://s.cdpn.io/3/kiwi.svg" border="0" alt="Submit" id="svg-hover"/>
</div>
</body>
</html>
0
qo'shib qo'ydi

Sinf kabi identifikatorni ishlata olmaysiz, ID bo'sh joydan iborat bo'lgan belgilar majmui. Ikkita echimning o'rniga sinf ishlatish yoki identifikatorni o'zgartirish. Bu misolda "o'zgarmaydigan" selektorni ID o'zgarganligini tekshirishda ishlatish mumkin.

<html>
<head>
</head>
<body>
<div class="icon-cnt" id="search-icon">
  <input type="image" src="http://s.cdpn.io/3/kiwi.svg" border="0" alt="Submit" id="svg-hover"/>
</div>
</body>
</html>
0
qo'shib qo'ydi