Question

我已经看到了许多不同的方法来解决以下问题，但它并不像我希望的那样有效......

我需要使用severel divs（item-divs）创建一个div（主div）。

每个item-div必须显示不同的图片，但是当我悬停某张图片时，应隐藏此图片并显示文字 - 在同一个div中。

我怎么能这样做？

Answer 1

您可以使用CSS伪元素：hover

参见示例： http://jsbin.com/vijawuda/1/edit?html,css,output

HTML标记：

   <div class='outer-container'>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 1
      </div>
    </div>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 2
      </div>
    </div>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 3
      </div>
    </div>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 4
      </div>
    </div>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 5
      </div>
    </div>
  </div>

CSS

.image-holder {
  width: 150px;
  height: 150px;
  display: inline-block;
}

.image-holder > .text {
  visibility: hidden;
  width: 150px;
  height: 150px;
}

.image-holder:hover img {
  visibility: hidden;
}

.image-holder:hover .text {
  visibility: visible;
}

Answer 2

例如这个变种：

<div class="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

你的css应该是：

.wrap:hover > child2{
    opacity: 0;
}

但是静态样式应该是这样的：

.wrap{
    width: 200px;
    height: 300px; /* maybe auto if you want */
    position: relative;
}

.child1{
    width: 100%;
    height: 100%;
    background: lightgreen;
}

.child2{
    width: 100%;
    height: 100%;
    background: #ff3030; /* surely for example */
    position: absolute;
    top: 0;
    left: 0;
}

/* and this block .child2 will be faced. When it's opacity will be 0, you get your effect */

Answer 3

<强> HTML

<div class="main">
    <div class="content">
        <div class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
    <div class="content">
        <div  class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
    <div class="content">
        <div  class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
    <div class="content">
        <div  class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
    <div class="content">
        <div  class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
</div>

<强> CSS

.main {
    width: 1000px;
    height: 200px;
}

.content {
   width: 150px;
    height: 150px;
    background-color:#c80000;
    color:#fff;
    font-family:arial;
    text-align:center;
    float:left;
    margin-left: 10px;
    font-size: 20px;
    cursor:pointer;
}

.content > div.maincontent + div {
    display:none;
    padding-top:50px;
}

.content:hover > div.maincontent {
    display:none;
}

.content:hover > div.maincontent + div {
    display:block;
}

http://jsfiddle.net/q92zL/4/

仅通过CSS更改悬停时的内容

3 个答案: