Question

我在这里有一个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动画。

非常感谢。

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

当然可以。这是result。

我做了什么。

首先： HTML保持不变。

CSS的第二个：我为<li>发明了两个类：last-x和last-y。第一种方法是，它没有任何右边的项目（即使在列表的末尾）。第二个是相同的，但垂直看。

CSS代码：

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

第三：添加jQuery并在其上撒上一些jQuery magic 。

<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。

包含在父级中的悬停动画

4 个答案: