將鼠標懸停在div內容上以顯示新的div內容

<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更容易，我會使用它。將鼠標懸停在div內容上以顯示新的div內容

來源

2013-01-01 Elizát Németh

我有一個很難理解你的問題。你能更詳細地指定哪些元素可以被徘徊，文檔的哪些部分在「正常」狀態和懸停狀態下應該可見或不可見？ – GolezTrol

在正常狀態下，我想讓div「imp」隱藏起來，然後在div「trivlimp」的內容懸停時顯示，div的內容爲「imp」，隱藏了div的內容「 trivlimp」。有點像當你徘徊一個圖像，顯示一個新的圖像，但這次與內容？ –

我會用jQuery來處理懸停狀態。我有點不在跟隨這個問題。所以我將你的代碼彈出到JSFiddle中，並按照你所尋找的內容醞釀出我認爲的東西。我用jQuery的鼠標懸停/鼠標移開：

$('.trivlimp').mouseover(function() { 
    $('.imp').show(); 
}); 

$('.trivlimp').mouseout(function() { 
    $('.imp').hide(); 
});

http://jsfiddle.net/arsCr/

來源

2013-01-01 01:47:58

它似乎在該網站上工作，但是當我放入自己的CSS和寬度;它不起作用，徘徊的div「trivlimp」不顯示div「imp」。（這是在我的網站上）如果我提供我的CSS會有幫助嗎？ –

用你的HTML和CSS創建一個JSFiddle（沒有添加jQuery）。郵寄回來，我會看看。 –

http://jsfiddle.net/Thrw2/我認爲我做到了這一點，我把所有用於此的CSS，和HTML。 –

做這樣的事情：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(); 
    }); 
});

來源

2013-01-01 02:02:06 Chanckjh

http://jsfiddle.net/Thrw2/3/

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(); 
}); 
});

來源

2013-01-01 03:03:52 Nandu

我不太明白你的問題，但你可以使用以下命令：

.imp { 
    display: none; 
} 

.trivlimp:hover + .imp { 
    display: block; 
}

來源

2013-01-01 03:27:51

僅適用於CSS – GolezTrol

將鼠標懸停在div內容上以顯示新的div內容

回答

相關問題