私の作品 (ポートフォリオ) の一部を表示する div のグリッドがあり、タイトル div を上に移動して説明を表示するマウス ホバー イベントに取り組んでいます。
見てみましょう：
http://olliejones.com/demo/demo.html
ご覧のとおり、ボックスにカーソルを合わせると、タイトル ボックスの高さが上に移動し、説明が表示されます。うまく機能すると思いますが、説明テキスト (ホバーしていないとき) は div の下にあります。
意味がわからない場合は、ページを更新して、すべてを強調表示してください (Cntl A)... 説明テキストが表示されますか? ええ、どうすればそれを防ぐことができますか？ホバーがアクティブなときにのみ表示し、ホバーがアクティブでないときに表示しないには?
これが私のコード、HTMLです。これは div の最初の行です (つまり、最初の 2 つのボックス):
<div id="cube_base">
<div id="cube1" onmouseover="portfolio_hover_over(1);">
<div id="cube_title1">Title
<div id="cube_logo">
<img src="images/icons/photoshop.png" width="20" height="20" border="0" title='Adobe Photoshop'>
</div><br/><br/>
<span class="cube_sub_title">This is a really long description about nothing. Here I begin to talk about nothing, rather interesting isn't it? Text goes here, and is seems like my imagination stops here.</span></div>
</div>
</div>
<div id="cube_div"></div>
<div id="cube_base">
<div id="cube2" onmouseover="portfolio_hover_over(2);">
<div id="cube_title2">Title
<div id="cube_logo">
<img src="images/icons/photoshop.png" width="20" height="20" border="0" title='Adobe Photoshop'>
</div><br/><br/>
<span class="cube_sub_title">This is a really long description about nothing. Here I begin to talk about nothing, rather interesting isn't it? Text goes here, and is seems like my imagination stops here.</span></div>
</div>
</div>
<br/>
<div id="cube_gap"></div>
<br/>
CSS:
#cube_div{
float:left;
width:40px;
height:100px;
}
#cube_gap{
width:800px;
height:40px;
float:left;
}
.cube_sub_title{
font-size:12px;
font-weight: normal;
}
#cube_title1{
position:absolute;
width:335px;
height:15px;
background-image: url(images/alpha_black_strong.png);
background-repeat: repeat;
bottom:0px;
padding:10px;
color:#EEE;
}
#cube_title2{
position:absolute;
width:335px;
height:15px;
background-image: url(images/alpha_black_strong.png);
background-repeat: repeat;
bottom:0px;
padding:10px;
color:#EEE;
}
#cube_base{
width:355px;
height:200px;
background-color:#080;
float:left;
padding:5px;
background-color:#f0f0f0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius:2px 2px 2px 2px;
border: 1px solid #bbbbbb;
background-image: url(images/icon_slate.png);
background-repeat: repeat-x;
background-position: top;
cursor:pointer;
}
/* Logo placements */
#cube_logo{
height:20px;
float:right;
left: 50px;
margin-top:-2px;
}
/* Actual Content for the cube divs */
#cube1{
position:relative;
width:355px;
height:200px;
background-color: #777;
}
#cube2{
position:relative;
width:355px;
height:200px;
background-color: #777;
}
そして私のJS：
function portfolio_hover_over(cube){
// hides the text panel
for(var i = 1; i < 7; i++){
if(i != cube){
//animated panel back to 15px
$('#cube_title'+i).animate({
height: '15px'}, 200, function(){
});
}
}
$('#cube_title'+cube).animate({
height: '130px'}, 200, function(){
});
}
ここにはたくさんのことがありますが、これについて何か助けていただければ幸いです、ありがとう!