Question

我想只显示悬停图像的文本，它应该位于悬停图片的下一个（左/右）灰色空间中（不在灰色空间外的图片下方）。

这只能用css吗？

如果不是我需要什么？ JavaScript的？

HTML

<div class="pictures">
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
</div>

CSS

.pictures {
    background-color:rgba(25, 25, 25, 0.3);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    --width: 960px;
    float:left;
    margin: 0 auto;
    position:relative;
    left:100px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.pictures:hover {
    left:40px;
}
.pic {
    width:100px;
    height:100px;
    float:left;
    margin:5px;
    position: relative;
    right: 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    background-color:rgba(25, 25, 25, 0.7);
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    color:blue;
    border-radius: 3px;
    /*abgerundete Ecken*/
}
.pic:hover {
    width:210px;
    height:210px;
    margin:5px 115px 0px -105px;
    right: -110px;
}
.inner-img {
    width:100%;
}

在jsFiddle工作示例上。

Answer 1

好的，这里有几件事情：

您的图片太大，因为有透明像素迫使该文字从深灰色框中移出。使图像只有它需要的大，然后将其嵌套在一个带有一些填充或其他东西的容器元素中，以达到类似的效果。
如果你要寻找的效果是在你悬停之前没有文字可见，那么是的。只需在文本中添加一个display:none，然后添加一个像.image-container:hover p { display:inline-block; }这样的选择器，或者你可以使用css3不透明度并淡入它，虽然这样会很丑，因为它已经放大了，你不希望它褪色或许也许。
如果你想要的效果不是上面描述的效果，你可以使用jQuery并轻松实现它。假设您希望所有文字都可见，然后在悬停时您希望其他所有图片的文字都消失，只需$('.image-container').hover(function(){//hide all text but the text nested in current element receiving the hover event });

如果您对具体实施有疑问，请告诉我，但这应该可以帮助您入门

CSS悬停在特定位置显示文本

1 个答案: