@Qurds12

Как при наведении на svg появлялся текст?

Как сделать что при наведении на svg появлялся текст

svg

<symbol id="flag-ru" width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="4" fill="white"/>
<rect y="4" width="20" height="4" fill="#001AFF"/>
<rect y="8" width="20" height="4" fill="#FF0000"/>
</svg>
</symbol>


html

<div class="flag flag--ru">
      <svg>
         <use xlink:href="@/assets/svg/svg.svg#flag-ru"></use>
       </svg>
</div>
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
@postya
data:() ({
hasText: false
})

meathods: {
showText() {
this.hasText = true
}

hideText() {
this.hasText = false
}
}


<div class="flag flag--ru" @mouseover="showText" @mouseleave="hideText">
      <svg>
         <use xlink:href="@/assets/svg/svg.svg#flag-ru"></use>
       </svg>
</div>

<p v-if="hasText">any text</p>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы