javascript - 悬停时显示 div 的图标

Question

我有一些图标在悬停时会放大，它们看起来有点像这样 jsfiddle .我试图找到一种方法让它们在它们下面显示一个 div，但我失败了。我尝试使用 Javascript，但我的技能很低。有人有办法吗？这是我用于图标的 CSS，

.icon {
    display: inline-block;
    margin-right: -5;
    z-index: 10;
    position: relative;
}
.icon:hover {
    width: 155px;
    z-index: 100;
    margin: -15px -22px -15px -13px;
}

还有我用于其中一个的 HTML:

<img class="icon" src="http://goolag.eu/wita.png">

Answer 1

您可以使用 :before或 :after在包含链接上显示隐藏的元素。

如果你想用不透明度使元素淡入淡出，你可以使用类似的东西:fiddle

a {
    position: relative;
}

a:after {
    content: "Content here"; 
    background: lightgray;
    position: absolute;
    top: 150px; left: 50%; right: 0; bottom: 0;
    height: 5em; width: 5em;
   -webkit-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
    transform: translateX(-50%);  /* used for dynamic horizontal centering */
    opacity: 0;
   -moz-transition: opacity 1s ease;
   -webkit-transition: opacity 1s ease;
    transition: opacity .6s ease;
}

a:hover:after {
    opacity: 1;
}

上面的唯一问题是，如果您将鼠标悬停在伪元素本身上，它就会出现。

解决这个问题的一种方法是结合定位和不透明度:fiddle

a {
    position: relative;
}

a:after {
    content: "Insert content";
    position: absolute;
    top: 0px; left: 50%; right: 0; bottom: 0;
    background: lightgray;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 100px;
    width: 100px;
    opacity: 0;
   -moz-transition: opacity 1s ease, top 1s ease;
   -webkit-transition: opacity 1s ease, top 1s ease;
    transition: opacity 1s ease, top 1s ease;
}

a:hover:after {
    top: 150px; /* slide it down 150px on :hover */
    opacity: 1;
}

请注意，如果您只有一个 <img /> (并且没有包装链接)这是行不通的，因为 :before 的行为& :after在自闭合元素上使用时未定义。此外，两个示例中的伪元素都可以像链接一样单击，因此这可能适用于您的用例，也可能不适用于您的用例。