Question

当我将鼠标悬停在包装盒上时，此消息框会在顶部淡入。我怎么做那样的东西？我可以用CSS制作吗？

提前致谢！

Answer 1

找到制作工具提示的简便方法：here

此处还有另一个插件：here

Answer 2

是。你可以通过CSS过渡来完成它。

.fade {
  opacity: 0;
  transition: opacity .25s ease-in-out;
}
.fade:hover {
  opacity: 1;
}

以下是一个示例：https://jsfiddle.net/x4dd500z/1/

Answer 3

首先设置msgbox的属性，然后

对于褪色使用

msgbox {
  opacity: 1;
}

 msgbox:hover {
   opacity: 0.75;
}

Answer 4

这样的事情： - 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;
}

如何创建此消息＆＃34;淡入消息框＆＃34;

4 个答案: