#html #css
Вопрос:
Я хочу, чтобы кривая линия зависала в CSS, когда вы что-то наводите
<style>
.Exp{
font-size:50px;
text-align:center;
}
.Exp:hover {
background:brown;
color:white;
}
</style>
<div class="Exp">Blog</div>
Вот так
Проверьте изображение
возможно ли это или нет в CSS?
Ответ №1:
Желаемого эффекта можно достичь, наложив div
на текст круг с небольшой рамкой внизу и развернув его при наведении курсора
<style>
.arc {
display: none;
position: absolute;
width: 2em;
height: 2em;
border-radius: 50%; /* make it circular */
background-color: transparent;
border-bottom: 3px solid brown; /* the arc effect */
}
.exp {
font-style: italic;
}
.wrapper:hover > .arc {
display: block;
}
</style>
<div class="wrapper">
<div class="arc"></div>
<div class="exp">Blog</div>
</div>
Комментарии:
1. Спасибо, для меня это работает. Я отредактирую его в соответствии со своими требованиями