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

通过一点点重组，只需使用CSS即可轻松完成。

将图标和<div>放在包含<div>的内容中，如下所示：

<div class="icon-container">
    <img class="icon" src="http://goolag.eu/wita.png">
    <div class="show-on-hover"></div>
</div>

然后使用以下CSS：

.icon-container img {
    /* Normal image state */
}
.icon-container:hover img {
    /* Enlarged image state */
}
.icon-container .show-on-hover {
    /* Normal background div state */
    display: none;
}
.icon-container:hover .show-on-hover {
    display: block;
}

请注意，您正在检查容器<div>是否悬停而不是图像本身。这使您可以轻松地将样式应用于容器的所有子项。

Answer 2

您可以在包含链接上使用: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＆amp;用于自闭元素时，:after未定义。此外，两个示例中的伪元素都可以像链接一样点击，因此这可能适用于您的用例，也可能不适用。

Answer 3

这是你正在寻找的吗？ jsfiddle

<强> jQuery的：

$("a").on("mouseenter", function () {
    $("#bg-div").show();
}).on("mouseleave", function () {
    $("#bg-div").hide();
});

基本上对任何锚标记都说，当鼠标进入时显示div，并在鼠标离开时隐藏div。

这可能更短：

$("a").hover(function() { // When hovering
    $("#bg-div").toggle(); // Toggle the element's visibility
});

Answer 4

您可以创建以下内容：

//HTML

<div id="newDiv"> Whatever you want to include </div>


//CSS

#newDiv {
   display: none,
   ...
}


//Javascript with JQuery

$( ".icon" ).hover(function() {
  $( "#newDiv" ).css("display", "block");
});

在悬停上显示div的图标

4 个答案: