小编Chr*_*lis的帖子

我正在使用 CSS 在我的页面上创建一个弹出窗口。我的标签内有一个设置为 display:none; 的内容。然后，当您将鼠标悬停在标签上时，会弹出该单词的定义。这对我来说效果很好，但是有时弹出窗口出现在浏览器窗口之外。有没有办法使用 CSS 确保整个弹出窗口保留在浏览器窗口内，或者我需要添加一些 Javascript？我真的希望弹出窗口出现在链接的位置，但我不在乎它是否向左或向右移动以便位于窗口内并可见。

这是我的代码：

a span {
display: none;
}

a:hover span {
display: block;
position: absolute;
width: 300px;
z-index: 1000;
}

预先感谢您的帮助！:-)

我有一个简单的功能,可以在鼠标悬停时更改图像的来源,并在mouseout上更改它.它工作得很好但是当我尝试将此效果应用于具有相同类的多个图像时,错误的图像被替换.所以我为每个鼠标悬停图像编写了不同的功能.它变得太多代码了.有人可以给我一些想法,我可以如何压缩这些代码,使所有具有某个类的图像切换到适当的悬停图像并返回.

$(document).ready(function(){
var passiveBio = $("#index_container img.bio").attr("src");
var hoverBio = passiveBio.replace(".jpg", "_hover.jpg");
$("#index_container img.bio")
    .mouseover(function() { 
        $(this).attr("src", hoverBio);
        })
    .mouseout(function() {
        $(this).attr("src", passiveBio);
        });
var passiveSamples = $("#index_container img.samples").attr("src");
var hoverSamples = passiveSamples.replace(".jpg", "_hover.jpg");
$("#index_container img.samples")
    .mouseover(function() { 
        $(this).attr("src", hoverSamples);
        })
    .mouseout(function() {
        $(this).attr("src", passiveSamples);
        });
var passiveServices = $("#index_container img.services").attr("src");
var hoverServices = passiveServices.replace(".jpg", "_hover.jpg");
$("#index_container img.services")
    .mouseover(function() { 
        $(this).attr("src", hoverServices);
        })
    .mouseout(function() {
        $(this).attr("src", passiveServices);
    });});

这是带图像的div.

<div id="index_container">
    <a href="samples.html"><img class="index_box samples" src="images/samples.jpg"/></a>
    <a href="services.html"><img class="index_box services" …