使 CSS 悬停在视口内

Posted 2023-05-08

【中文标题】使 CSS 悬停在视口内

【英文标题】：Make CSS hover stay within viewport

【发布时间】：2012-02-21 09:07:16

【问题描述】：

我使用 CSS 设置了悬停解决方案。但是，悬停图像不尊重视口，因此最终显示在视口之外。我计划根据我的设计中图像的位置简单地创建新的类来指定偏移量，但是由于我无法控制用户使用的分辨率，我想应该有一些方法可以强制悬停在其中显示视口。有人知道我该怎么做吗？

我有以下 CSS：

.thumbnail:hover 
    background-color: transparent;
    z-index: 50;


.thumbnail span  
    position: absolute;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;


.thumbnail span img  
    border-width: 0;
    padding: 2px;


.thumbnail:hover span  
    visibility: visible;
    top: 0;
    left: 70px; 

使用悬停匹配以下缩略图：

<li>
    <a href="http://www.yahoo.com" class="img thumbnail">
        <img src="1_s.jpg" />
        <span><img src="1_b.jpg" /></span>
    </a>
</li>
<li>
    <a href="http://www.google.com" class="img thumbnail">
        <img src="2_s.jpg" />
        <span><img src="2_b.jpg" /></span>
    </a>
</li>

我在这里有一个示例页面显示该行为：

http://estorkdelivery.com/example/example2.html

将鼠标悬停在底部的图像上以查看悬停图像显示在视口之外。

谢谢！

2012 年 2 月 22 日更新 我在下面测试了答案 #1，但它引入了新问题，例如需要更改透明度以及需要始终从左上角显示悬停图像图像的 - 这两个问题我都看不到使用脚本选项修改的方法。有人有其他建议或修改答案＃1中的脚本的方法吗？另外，我应该添加我正在寻找的内容，因为更多的最终结果是 istockphoto.com 上图像的悬停样式，其中图像始终出现在它们悬停的图像左侧或右侧的同一位置，而不是基于鼠标悬停在图像上时的位置。

【问题讨论】：

嗨 Yazmin，我已经更新了我的代码以反映您的要求。试一试，让我知道。 ;-)

【参考方案1】：

我已经为你创建了一个定制插件！

http://jsfiddle.net/adaz/tAECz/

嗯，这很基本，但我认为它符合您的标准。您可以通过两种方式激活它：

1) 如果您不想为每张图片创建缩略图，您可以像这样简单地列出您的图片：

<ul id="istockWannabe">
    <li>
        <img src="imgURL"   title="Description" />
    </li>
    <li>
        <img src="imgURL"   title="Description" />
    </li>
...
</ul>

2) 如果你真的想创建自己的缩略图，你的 html 应该是这样的：

<ul id="istockWannabe">
    <li>
        <span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
    </li>
...
</ul>

无论您选择哪种方式，您都需要在您的页面中包含 jQuery 1.7+ 以及我的插件。

您需要做的最后一件事是激活它，如果您选择第一个选项，您可以在页面中包含以下代码：

<script type="text/javascript">
    $(document).ready(function() 
        $("#istockWannabe").istockWannabe();
    );
</script>

如果您要选择第二个选项，则需要像这样覆盖默认设置：

<script type="text/javascript">
    $(document).ready(function() 
        $("#istockWannabe").istockWannabe( createThumbs: false );
    );
</script>

这更像是一个原型，因此在功能方面非常有限，但您可以设置一些选项，例如： 拇指最大宽度：100 拇指最大高度：100 工具提示宽度：200 工具提示高度：150 过渡速度：100

如果您喜欢它，我很乐意花一些时间来调整它以满足您的需求！

【讨论】：

Adaz - 这与 iStock 所拥有的非常接近，非常棒！唯一的另一个主要问题是这并没有解决引发这个问题的视口问题。一旦我为 UL 容器添加了宽度并为 LI 添加了一些间距以阻止 jsfiddle 框滚动，悬停时显示的图像仍然出现在视口之外。建议？ （顺便说一句，为我写的东西是超越 - 我感谢你！+1 给你！）

别担心！我不确定你到底是什么意思，你能把你的小提琴发给我吗？我做了一些改进，也许可以解决你的问题：jsfiddle.net/adaz/tAECz/1

Adaz - 你最新的小提琴解决了我之前谈到的问题。如果我不需要从您创建的默认实现中更改它，它会很好用，但是当我尝试按照建议添加选项时，我收到“意外令牌”错误。我拿走了你正在使用的东西，并创建了一个小提琴，它可以更多地模仿我正在做的事情。仍然出现同样的错误，以及悬停未停留在右侧的视口内并在我需要保留在 LI 标签内的文本下方重写自身：jsfiddle.net/ywickham/g7tDQ/4

嘿 Yazmin，我刚刚做了更多改进，现在你可以看到我使用了自定义选项：jsfiddle.net/adaz/rz2vH - 我没有在 CSS 中指定剩余边距，而是添加了工具提示偏移顶部的选项走了。这是我的插件的第二个实现的示例：jsfiddle.net/adaz/AvYXE。如果你迷路了，这里是你设置选项的地方： $("#istockWannabe").iStockWannabe( thumbMaxWidth: 50, thumbMaxHeight: 50, tooltipOffset: top: 0, left: 120 );

【参考方案2】：

试试 jQuery 工具提示：

这是根据您的要求提供的示例：http://jsfiddle.net/cadence96/3X2eZ/

文档http://docs.jquery.com/Plugins/Tooltiphttp://jquery.bassistance.de/tooltip/demo/

快速说明： 1) 在

中加载 css 和脚本：

<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>

2) 仍然在

内放置执行脚本：

<script type="text/javascript">
            $(document).ready(function() 
                $(".your-div").tooltip(
                    track: true,
                    delay: 0,
                    showURL: false,
                    fade: 250,
                    bodyHandler: function() 
                        return $($(this).next().html());
                    ,
                    showURL: false
                );
            );
        </script>

“.my-div”类将用于显示带有悬停事件的图像。 '.my-div' 的同级 div 必须包含隐藏元素，以便在悬停后可见。

<ul>
    <li>
            <div class="my-div">
                <!-- Here comes the image with the hover event -->
            </div>
            <div class="active-hover">
                <!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
                <!-- .active-hover must be set with display:none -->
            </div>
    </li>
</ul>

就是这样！

【讨论】：

这是一个很好的答案，但它引入了一系列全新的问题。我需要删除背景透明度并将偏移图像设置为从图像的左上角出现。我没有看到如何解决文档中的任何一个问题。 :/ 谢谢！

【参考方案3】：

我开发了一个脚本，在js中可以改变容器的宽度。

这是小提琴： http://jsfiddle.net/cadence96/GgDqh/

已更新，现在可在 FIDDLE 中使用，并且更具适应性。

【讨论】：

我在网站上对此进行了测试，但不得不离开......今晚会回来。谢谢节奏！

嘿Cadence - 自从您最初回答问题以来，我一直在尝试解决您的问题，但悬停仍然出现在我的视口之外，因此无法解决问题。 ://

你在小提琴之外测试过吗？在那里效果更好。请注意，我已经替换了初始脚本。

是的，在发表评论之前，我确实先在小提琴之外对其进行了测试，并且我只能在您进行更新后返回测试（根据我之前的评论），所以我测试了您的最新版本。

你能告诉我它在什么情况下失败了吗？我知道它并不完美，特别是在非常小的窗口中，或者当它只有很少的照片时。但对我来说，它运行良好，并且与 istock 脚本在 960 和 600 像素场景中的方式非常相似。

【参考方案4】：

更新：

演示：http://so.lucafilosofi.com/make-css-hover-stay-within-viewport

看源码

注意：这不考虑弹出窗口大于窗口的情况，在这种情况下，您不仅应该更改偏移位置，还必须调整弹出窗口的大小以适应窗口。

【讨论】：

谢谢 aSeptik，但我不想让窗口滚动以显示悬停图像。

@rpearce: tnx 注意断开的链接，我已修复它。

【参考方案5】：

这行得通。然而，我只解决了 Y 轴的问题。对于水平偏移，它应该是相同的。 See how it works here。 我将top 设置为图像* -1 的确切一侧，如果图像不合适，这会将图像在底部对齐，将该值更改为您想要的任何值。图像非常大，但是这个脚本不是防弹的。您必须获得整个可见区域，以确保在重新定位时它不会从另一侧切掉。

标记没有改变，我只是添加了 Jquery：

    $(document).ready(function()

    $(".thumbnail > img").mouseenter(function()

        var winSize = $(window).height();
        var winScrollTop = $(window).scrollTop();
        var linkOffset = $(this).offset().top - winScrollTop + 75; 
        // 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
        var imgHover = $(this).next("span");
        var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
        var spaceDif = winSize-linkOffset;
        if(spaceDif < imgHoverHeight)
            imgHover.css("top", -imgHoverHeight+"px");
          //it doesn't have to be -imgHoverHeight. Tweak this value to get better results           
        

    ); 

    $(".thumbnail > img").mouseout(function()

        $("span").css("top", "0");

    );
);

希望对您有所帮助！

【参考方案6】：

试试这个...看起来比较酷！

<html>
<head>
    <title>Hover Test</title>
    <style>
        li margin-bottom: 100px;
        .thumbnailposition: relative;z-index: 0;
        .thumbnail:hoverbackground-color: transparent;z-index: 50;
        .thumbnail div /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;
        .thumbnail div img /*CSS for enlarged image*/border-width: 0;padding: 2px;
        .thumbnail:hover div /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */
    </style>
</head>
<body>
    <li>
        <a href="http://www.yahoo.com" class="img thumbnail">
            <img src="1_s.jpg">
            <div><img src="1_b.jpg"></div>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" class="img thumbnail">
            <img src="2_s.jpg">
            <div><img src="2_b.jpg"></div>
        </a>
    </li>
    <li>
        <a href="http://www.apple.com" class="img thumbnail">
            <img src="3_s.jpg">
            <div><img src="3_b.jpg"></div>
        </a>
    </li>
    <li>
        <a href="http://www.babycenter.com" class="img thumbnail">
            <img src="4_s.jpg">
            <div><img src="4_b.jpg"></div>
        </a>
    </li>
    <li>
        <a href="http://www.food.com" class="img thumbnail">
            <img src="5_s.jpg">
            <div><img src="5_b.jpg"></div>
        </a>
    </li>       
</body>