[英]Hover over div content to reveal new div content
<center>
<div class="trivlimp">
<center><div class="lyrics"><!-- |field_1| --></div></center>
</div>
<div class="imp">
<div class="trgls"><!-- |points| --> Gallons</div><br>
<div class="trals"><!== |field_2| --></div><br>
<div class="trpc"><!-- |posts| --> posts</div><br>
<div class="trttr"><!-- |field_3| --></div><br>
</div>
</center>
我希望能夠將鼠標懸停在div“trivlimp”上,以便在“trivlimp”之上顯示div“imp”; 將第一個div隱藏在div“imp”下面。 我試過這樣做:懸停但完全失敗,結果只讓自己變得更加沮喪。 我並不反對使用Jquery,但我想用css完全做到這一點; 但如果使用jquery更容易,我會使用它。
HTML代碼
<center>
<div class="trivlimp">
<center><div class="lyrics"> |field_1| </div></center>
</div>
<div class="imp">
<div class="trgls"> |points| Gallons</div><br>
<div class="trals">|field_2| </div><br>
<div class="trpc"> |posts| posts</div><br>
<div class="trttr">|field_3|</div><br>
</div>
css代碼
.trivlimp { background-color:#FF0000;
width: 260px;
height: 400px;
text-align: center;
position: absolute; }
.imp { width: 260px;
height: 400px;
background-color:#676767;
display: none;
position: absolute;
top: 0; }
.lyrics {
margin-top: 50%;
background-color: #CC0066;
width: 180px;
padding: 5px;
height: 130px
overflow: auto;
text-align: justify;
text-transform: uppercase;
font-family: Georgia;
font-style: italic;
font-size: 10px;
line-height: 10px;
}
.trgls {
width: 190px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color:#6666FF;
text-transform: uppercase;
}
.trals {
width: 170px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #00FF00;
text-transform: uppercase;
}
.trpc {
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #FFCC00;
text-transform: uppercase;
}
.trttr {
width: 130px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #009900;
text-transform: uppercase;
}
jQuery的
$(function(){
$('.trivlimp').hover(function() {
$('.imp').show();
},
function() {
$('.imp').hide();
});
});
我不太明白你的問題,但你可以使用以下內容:
.imp {
display: none;
}
.trivlimp:hover + .imp {
display: block;
}
我會使用jQuery來處理懸停狀態。 我有點不關心這個問題。 因此,我將您的代碼彈出到JSFiddle中,並根據您所尋找的內容釀造出我認為的內容。 我使用了jQuery的mouseover / mouseout:
$('.trivlimp').mouseover(function() {
$('.imp').show();
});
$('.trivlimp').mouseout(function() {
$('.imp').hide();
});
http://jsfiddle.net/arsCr/
做這樣的事情: http : //jsfiddle.net/chanckjh/PWtTw/html :
<div class="trivlimp">
</div>
<div class="imp">
</div>
CSS:
.trivlimp{
border: 1px solid red;
width: 500px;
height: 300px;
}
.imp{
border: 1px solid blue;
width: 500px;
height: 300px;
background: blue;
display: none;
}
jquery:
$(function() {
$('.trivlimp').hover(function() {
$('.imp').show();
}, function() {
$('.imp').hide();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.