0

我有几张带有标题和描述的图片。我想把标题和描述放在图像后面，当我将鼠标悬停在它上面时，图像消失，标题和描述出现。

我已经做了一些事情，但我不能继续。

这是html代码：

<div class="views-field-field-contest-image">
  <a href=""> <img>....</img> </a>
</div>
<div class="views-field-title">
  <p>("title")</p>
</div>
<div class="views-field-field-description">
  <p>("description")</p>
</div>

这是CSS代码：

.views-field-field-contest-image {
    border: 1px solid #ddd;
    display: block;
    height: 250px;
    overflow: hidden;
    width: 250px;
}

.views-field-field-contest-image:hover img {
    display: none;
}

.views-field-title {
    display:none;
}

.views-field-field-description {
    display:none;
}

.views-field-title:hover {
    display: block;
    text-align: center;
    margin: 20% 0 0;
}

问题是标题和描述“隐藏”在图像下方而不是后面，我无法让它们出现在悬停时

4

2 回答 2

1

你也可以玩定位：

HTML

<div class="view-content">
    <div class="views-field-field-contest-image">
      <a href=""> <img src="http://lorempixel.com/250/250/technics">....</img> </a>
    </div>

    <div class="views-field-title">
      <p>("title")</p>
    </div>

    <div class="views-field-field-description">
      <p>("description")</p>
    </div>
</div>

CSS

.views-field-field-contest-image {
    border: 1px solid #ddd;
    display: block;
    height: 250px;
    overflow: hidden;
    width: 250px;
}

.views-field-field-contest-image:hover img {
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    opacity: 0.2
}

.view-content{width: 250px; height: 250px; position: relative; }
.views-field-title, .views-field-field-description{ width: 250px; height: 250px; position: absolute; top: 0; z-index: -1; text-align: center; line-height: 1em;}
.views-field-field-description{ top: 1.5em; }
于 2013-07-23T18:09:32.880 回答
1

我会使用图像作为背景图像，<a />标签中带有描述/标题。在悬停时（在整个 div 上），隐藏背景图像并显示组件：

<style>
.views-field-field-contest-image {
  border: 1px solid #ddd;
  display: block;
  height: 250px;
  overflow: hidden;
  width: 250px;
  background-image: url("...");
}

.views-field-field-contest-image:hover  {
  background-image: none;
  cursor: pointer;
}

.views-field-title {
  display:none;
  text-align: center;
  margin: 20% 0 0;
}

.views-field-field-description {
  display:none;
}

.views-field-field-contest-image:hover .views-field-title,
.views-field-field-contest-image:hover .views-field-field-description 
{
  display: block;
}
</style>

<div class="views-field-field-contest-image">
  <a href="#">  
    <div class="views-field-title">
      <p>("title")</p>
    </div>
    <div class="views-field-field-description">
      <p>("description")</p>
    </div>  
  </a>
</div>

示例 CodePen：http ://codepen.io/paulroub/pen/pEwyq

于 2013-07-23T18:01:33.907 回答