Question

我最近发布了一个网站（http://www.howrad.me），除了在Safari中悬停外，一切运作良好。叠加层pgaTitle未与图片pgaPhoto对齐。

以下是图纸部分（http://howrad.me/tattoos.html#drawings）

中的代码示例

        <a class="fancybox" data-fancybox-group="thumb2" title="2012 baybay" href="images/2012/1.jpg">
        <div class="pgaPhoto">
        <div class="pgaTitle" style="display: none;">
        <h2>2012</h2>
        </div>  
        <img src="images/covers/drawing2012.jpg" />
        </div></a>


        <a class="fancybox" data-fancybox-group="thumb3" title="figure study"href="images/2009/drawings/1.jpg">
         <div class="pgaPhoto">
         <div class="pgaTitle" style="display: none;">
        <h2>2010</h2>
        </div>  
        <img src="images/covers/drawing2010.jpg" />
        </div></a>

我的html语法似乎很好，下面的jquery工作正常：

        $(document).ready(function() {
            $(".pgaPhoto").hover(function() {
                $(this).find(".pgaTitle").stop().fadeTo(300, 1 , function() {
                });
            } , function() { //on hover out...
                $(this).find(".pgaTitle").fadeTo(300, 0);
            });
        });

我只是不明白为什么左侧图像的悬停状态稍微偏离，特别是当我在其他浏览器中没有真正的问题时。任何帮助？非常感谢你提前!!

Answer 1

你在块和内联元素之间混淆了。

<a> is an inline element
<div> is a block element

块可以包含内联元素，但内联元素不能包含块。

每当你在一个内联元素中放置一个块时，浏览器就会找到一种方法来解决这个差异，但是你会得到无效的HTML并且会遇到更多错误。

要解决您的问题，请将<div>块放在<a>元素之外，或将<div>替换为最近的内联等效词：<span>。

为什么这个jQuery悬停状态在Safari中是不对齐的？

1 个答案: