私が取り組んでいる素敵なホバー効果を持つJSFiddleがここにありますが、ホバー効果を親に含めることが可能かどうか知りたいです
一番右のリスト項目と、ホバーしたときの一番下の行がグリッドの外に出ることを除いて、すべてがうまく機能します。理想的には、右側の右上の点から、下の行の左下から成長させたいと思います.
これが理にかなっているといいのですが、それが可能かどうか知りたいだけですか?
ここにHTMLがあります
<ul class="tearsheets">
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
<li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
</ul>
そしてCSS
ul.tearsheets{
overflow:hidden;
clear:both;
max-width:100%;
position:relative;
}
.tearsheets li span {
display:inline-block;
vertical-align:middle;
height:110px;
}
.tearsheets{
padding:18px 18px 108px 18px;
}
.tearsheets li{
float:left;
line-height:110px;
width:160px;
list-style:none;
height:110px;
background-color:#9C9B9B;
text-align:center;
position:relative;
margin:0 1px 1px 0;
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
}
.tearsheets li a{
display:block;
}
.tearsheets li span img{
padding-top:10px;
z-index: 0;
max-height:90px;
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
}
.tearsheets li a:hover{
height:221px;
background-color:#9C9B9B;
width:321px;
position:absolute;
z-index:1000000;
}
.tearsheets li a:hover span{
padding-top:10px;
}
.tearsheets li a:hover span img{
max-height:180px;
}
IE8-9 でさらにうまく動作する場合、誰かがこれを手伝ってくれれば素晴らしいことです。この段階では IE8 のアニメーションについてあまり心配していません。
どうもありがとう。