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_ 相同的想法，但执行方式略有不同：Demo

新的 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 保持不变。

第二：对于 CSS，我为您<li>的 s:last-x和last-y. 第一个意味着它右边没有任何项目（即使在列表的末尾）。第二个是相同的，但垂直看。

CSS 代码：

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

第三：添加 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。