0

我只想使悬停图像的文本可见，并且它应该在悬停图片旁边（左/右）的灰色空间中（而不是在灰色空间之外的图片下方）。

只有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上的工作示例。

4

1 回答 1

1

好的，这里有几件事：

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

如果您对具体实施有疑问，请告诉我，但这应该可以让您开始

于 2013-01-18T16:27:37.117 回答