ImageКак создать это «замирание в окне сообщения»
Когда я парить мышь на поле, это поле сообщения выгорает сверху. Как мне сделать что-то подобное? Могу ли я сделать это с помощью CSS?
Заранее благодарен!
ImageКак создать это «замирание в окне сообщения»
Когда я парить мышь на поле, это поле сообщения выгорает сверху. Как мне сделать что-то подобное? Могу ли я сделать это с помощью CSS?
Заранее благодарен!
Да. Вы можете сделать это с переходом CSS.
.fade {
opacity: 0;
transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1;
}
Вот пример: https://jsfiddle.net/x4dd500z/1/
Сначала установите свойства для MsgBox затем
Для выцветания использования этого
msgbox {
opacity: 1;
}
msgbox:hover {
opacity: 0.75;
}
Что-то вроде этого: - JSFiddle
HTML:
<div class="box">
<img src="http://placehold.it/100x100">
<span>Tooltip</span>
</div>
CSS
.box {
position:relative;
display:inline-block;
width:100px;
height:100px;
padding:2px;
border:1px solid #000;
margin:10px;
}
span {
position:absolute;
top:0;
left:0;
right:0;
width:100%;
padding:2px 0;
background-color:#000;
background-color:rgba(0,0,0,0.65);
color:#fff;
opacity:0;
transition: opacity .5s ease-in-out;
text-align:center;
font-family:Arial;
font-size:14px;
}
.box:hover span {
opacity:1;
}
Да, действительно. Но я хочу, чтобы всплывающая подсказка была вне коробки, и когда я наводил курсор на окно - показывает всплывающие подсказки. И я не хочу, чтобы всплывающая подсказка показывалась, когда я наводил на нее курсор. Заранее спасибо!!! –
Так что-то вроде этого? http://jsfiddle.net/rgh5qqLj/3/ –
ДА! Большое спасибо! : * –
https://jqueryui.com/tooltip/ –
Добро пожаловать на ТАК! Просьба представить код с тем, что вы пробовали до сих пор. –
Добро пожаловать в переполнение стека! Ожидается, что вы, по крайней мере, попытаетесь закодировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы проводите дополнительные исследования, либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали, и почему это не сработало. –