رضا شقاقی
1 سال پیش توسط رضا شقاقی مطرح شد
8 پاسخ

ارور در رنگ کردن یک svg حین hover کردن

سلام من حین hover کردن مشکلی که دارم اینه که نمیتونم svg رو recolor کنم باید چیکار کنم؟ ممنون


ثبت پرسش جدید
محمد حسین
تخصص : mevn stack
@saghari 1 سال پیش مطرح شد
0

منظورت اینه که بعد از هاور رنگ به حالت اول برنمیگرده؟
کدت رو بذار تا بهتر متوجه بشیم


رضا شقاقی
تخصص : Programmer Student
@Reza.Programmer 1 سال پیش آپدیت شد
0
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Document</title>  
<style>  
img:hover{  
fill: white !important;  
}  
</style>  
</head>  
<body>  
<img src="../Image/search.svg" alt="">  
</body>  
</html>

ببخشید وقتی که svg رو به صورت img وارد میکنم دیگه نمیتونم تغییر رنگش رو اعمال کنم ولی وقتی که تگ svg رو میدم میتونم.
خواستم بپرسم که svg رو همیشه باید به صورت تگ svg اعمال کنم یا با تگ img


ابوالفضل نصیبی
تخصص : front end
@abol.p 1 سال پیش مطرح شد
-1

سلام اسکرین ازش بزار یکم به هم ریخته شده تایپش


محمد حسین
تخصص : mevn stack
@saghari 1 سال پیش مطرح شد
0

خب اشکال همینجاس دیگه
پراپرتی fill برای تگ img جواب نمیده باید همون تگ svg رو بذاری


رضا شقاقی
تخصص : Programmer Student
@Reza.Programmer 1 سال پیش مطرح شد
0

با تشکر از شما، ممنون🙏


سینا شاه‌اویسی
تخصص : برنامه نویس فرانت اند
@sinashahoveisi 1 سال پیش مطرح شد
0

سلام باید اون fill رو برابر current-color بذارید و color رو مقدار رنگ مدنظرتون قرار بدید و با هاور کردن مقدار color رو تغییر بدید

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Apply a default color to the parent element */
    .parent-element {
      color: blue; /* Change this to the default color you want */
    }

    /* Change the color of the SVG on hover */
    .parent-element:hover circle {
      color: red; /* Change this to the desired color on hover */
    }
  </style>
</head>
<body>
  <div class="parent-element">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="currentColor" />
    </svg>
  </div>
</body>
</html>

رضا شقاقی
تخصص : Programmer Student
@Reza.Programmer 1 سال پیش مطرح شد
0

ممنون از شما


مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش مطرح شد
0

سلام دوست من اگه مشکلت حل شده تایپیک رو ببند وگرنه اگه مشکلت پابرجاست بگو بهمون تا کمکت کنیم ❤️❤️


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام