0

我正在尝试将 3 个图像放在一个 div 中。更复杂的是，当鼠标悬停在图像上时，我需要隐藏图像并显示文本。

这是我的 HTML 代码：

<div class="TopRow">
<div class="TP">
<div class="TitleM">
  <a href="link">TP</a>
</div>
<div class="showcase">
<img src="image"   alt="TPM"/>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop   </a></p>
</div>
</div>

<div class="SF">
<div class="TitleM">
  <a href="link">Stearns & Foster</a>
</div>
<div class="showcase">
<img src="image"   alt="TPM"/>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop  </a></p>
</div>
</div>

<div class="VS">
<div class="TM">
  <a href="link">VS</a>
</div>
<div class="showcase">
<img src="image"   alt="TPM"/>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop </a></p>
</div>
</div>

这是我的 CSS

<style type="text/css">
div.showcase {height: 241px; width: 300px; border: solid 1px #939598;}
div.showcase p {display: none;}
div.showcase:hover img {display: none;}
div.showcase:hover p {display: block;}

}
.TopRow {
height: auto;
width: 95%;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
 }
.TP {
    Float:left;
height: auto;
width: 33%;

.V3 {
margin:0;
height: auto;
width: 33%;

.SF {
    Float:right;
height: auto;
width: 33%;
}
.TM {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 125%;
background-color: #dce1e9;
text-align: left;
margin-bottom: 3px;
padding-left:0px;
padding-top:5px;
padding-bottom:5px;
height: auto;
width: 100%;
    border: solid 1px #939598;
text-indent: 5px;
}

我知道我的问题在于展示 div 中的设置大小，但是我无法正确排列。任何帮助，将不胜感激。

4

1 回答 1

0

我试图在这个小提琴中解决你的问题：Click me for Fiddle

我也试着清理你的代码，因为有很多错误。

HTML

<div class="TopRow">
    <div class="TP">
        <div class="TitleM">
            <a href="#">TP</a>
        </div>
        <div class="showcase">
            <img src="http://osric.com/8ball/images/eight-ball.png" alt="TPM"/>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop   </a></p>
        </div>
    </div>
    <div class="SF">
        <div class="TitleM">
            <a href="#">Stearns &amp; Foster</a>
        </div>
        <div class="showcase">
            <img src="http://osric.com/8ball/images/eight-ball.png"   alt="TPM"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop  </a></p>
        </div>
    </div>
    <div class="VS">
        <div class="TM">
             <a href="#">VS</a>
        </div>
        <div class="showcase">
            <img src="http://osric.com/8ball/images/eight-ball.png"   alt="TPM"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="link">>> Shop </a></p>
        </div>
    </div>
</div>

CSS

div.showcase {
    border: solid 1px #939598;
}
div.showcase p {
    visibility:hidden;
}
div.showcase:hover img {
    visibility:hidden;
}
div.showcase:hover p {
    visibility: visible;
}

body {
    margin:0;
}

.TopRow {
    width: 99%;
    margin-bottom: 10px;
}
.TP {
    width:33%;
    display:inline-block;
}
.VS {
    width:33%;    
    display:inline-block;
}
.SF {
    width: 33%;
    display:inline-block;
}
于 2013-08-09T06:23:31.800 回答