css - 親に含まれるホバー アニメーション

Question

私が取り組んでいる素敵なホバー効果を持つJSFiddleがここにありますが、ホバー効果を親に含めることが可能かどうか知りたいです

http://jsfiddle.net/cyXKx/

一番右のリスト項目と、ホバーしたときの一番下の行がグリッドの外に出ることを除いて、すべてがうまく機能します。理想的には、右側の右上の点から、下の行の左下から成長させたいと思います.

これが理にかなっているといいのですが、それが可能かどうか知りたいだけですか?

ここに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 のアニメーションについてあまり心配していません。

どうもありがとう。

Answer 1

duality_ と同じ考え方ですが、実行方法が少し異なります:デモ

新しい CSS:

.tearsheets li.right a:hover {
    right: 0;
}
.tearsheets li.bottom a:hover {
    bottom: 0;
}

JS (jQuery を使用):

function adjust() {
  $('ul.tearsheets').each(function () {
    var items = $(this).children(),
        num_items = items.length,
        num_per_row, i, n;

    if (num_items) {
      items.removeClass('right bottom');

      // find number of items per row
      n = 0;
      items.each(function (i) {
        var l = $(this).position().left;
        if (l <= n) {
          num_per_row = i;
          return false;
        } else {
          n = l;
        }
      });

      // apply 'right' class to the last column of items
      if (num_per_row > 1) {
        for (i = num_per_row - 1; i < num_items; i += num_per_row) {
          items.eq(i).addClass('right');
        }
      }

      // apply 'bottom' class to last row of items
      n = items.eq(-1).position().top;
      if (items.eq(0).position().top < n) {
        $(items.get().reverse()).each(function () {
          var item = $(this), t = item.position().top;
          if (t == n) {
            item.addClass('bottom');
          } else {
            return false;
          }
        });
      }
    }
  });
}

$(window).on('resize', adjust);
adjust();

Answer 2

Javascriptを無駄にしないでください。これはもう少し直接的です。

    .tearsheets li:nth-of-type(even) >  a:hover {
    left:-160px;
    }

それをcssに追加するだけで完了です。

Answer 3

確実なこと。結果は次のとおりです。

私がしたこと。

まず、HTMLは同じままです。

2番目： CSSの場合、私はあなた<li>のs：last-xと。のために2つのクラスを発明しますlast-y。1つ目は、右側にアイテムがないことを意味します（リストの最後でも）。2つ目は同じですが、垂直に見ています。

CSSコード：

.tearsheets li.last-x a:hover{ left: -161px; }
.tearsheets li.last-y a:hover{ top: -111px; }

3番目： jQueryを追加し、それにjQueryの魔法をかけます。

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function() {
    var $tearsheets = $(".tearsheets");
    var line_length = Math.floor($tearsheets.width() / $tearsheets.find("li:first").width());
    var items_count = $tearsheets.find("li").length;
    var full_lines_count = Math.floor(items_count / line_length);
    var index = 0; // somehow the internal index inside .each() doesn't work :-/
    $tearsheets.find("li").each(function(i) {
        var item_position = i + 1;
        var items_on_the_right = line_length - (i % line_length) - 1;
        //console.log(items_on_the_right + ", " + items_count + ", " + item_position);
        if (items_on_the_right > (items_count - item_position))
            items_on_the_right = items_count - item_position;
        if (items_on_the_right == 0)
            $(this).addClass("last-x");

        var current_line = Math.ceil(item_position / line_length);
        $(this).attr("data-current-line", current_line);
        if (current_line >= full_lines_count)
            $(this).addClass("last-y");
    });
});
</script>

Answer 4

これに対する最善のアプローチは、CSS3 を使用することだと思います。以下を追加するだけで実行できます。

ul.tearsheets > li:nth-child(even):hover {
    position:relative;
    right:161px;
}

ここでjsfiddle .

これで はli右から左に移動しますが、それがあなたが望んでいたものかどうかはわかりません。次のプロパティを追加することで、その動作を変更できます。

transition:none;
-webkit-transition: none;
-moz-transition:none;  
-o-transition:none;

ここでjsfiddle .

CSS3 セレクターを使用したため、このソリューションは IE8 などの古いブラウザーでは機能しないことに注意してください。