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

时间:2014-06-27 07:53:41

标签: css hover swap

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

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

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

我怎么能这样做?

3 个答案:

答案 0 :(得分:0)

您可以使用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;
}

答案 1 :(得分:0)

例如这个变种:

<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 */

答案 2 :(得分:0)

<强> 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/