jjzjj

javascript - 使子元素出现在父元素之外

coder 2024-07-25 原文

我的页面上有一个高度为 200 像素并应用了溢出隐藏的 slider ，在该 slider 内有列表项/图像，它们也是 200 像素。当您将鼠标悬停在图像 ID 上以显示上面的工具提示时，我唯一的问题是工具提示由于溢出规则而被隐藏。

我以为 id 可以通过给它一个更高的 z 索引来显示工具提示，但这似乎没有用，你能让子元素从它们的父元素中分离出来吗？

我希望这是有道理的。

简而言之，我的代码结构类似于下面

<div class="clip">
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a>
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a>
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a>
</div>

CSS...

.clip {
    height:200px;
    overflow:hidden;
    width:400px;
}

.tooltip {
    font-weight:bold;
    position: relative;
}

.tooltip a {
    font-weight:bold;
}

.tooltip span {
    margin-left: -999em;
    position: absolute;
}

.tooltip:hover span {
    background: url("../images/backgrounds/black_arrow_big.png") no-repeat scroll 0 0 transparent;
    font-size: 11px;
    height: 163px;
    left: -100px;
    margin-left: 0;
    padding: 40px 30px 10px;
    position: absolute;
    top: -200px;
    width: 310px;
    z-index: 99;
}

最佳答案

据我所知，您不能像您所描述的那样让子元素违反父元素的规则。相反，您可能希望将工具提示附加到顶级元素(例如 document.body)，并使用一点 javascript 将其定位在图像的绝对位置上

<head>
    <style>
        #container {
            position: relative;
        }
        #tooltip {
            position: absolute;
            display:none;
            width: 200px;
            height: 100px;
            z-index: 99;
            background-color: gold;
            top: 0px;
            left: 0px;
        }
        .clip {
            height: 200px;
            width: 400px;
            overflow: hidden;
            background-color: #C0C0C0;
            position: absolute;
            top: 50px;
            left: 0px;
        }
        img {
            height: 200px;
            width: 100px;
            background-color: #222222;
        }
    </style>
</head>
<script>
    function imgover(img, tip) {
        document.getElementById('tooltip').style.display = 'block';
        document.getElementById('tooltip').innerHTML = tip;
        document.getElementById('tooltip').style.left = img.offsetLeft + 'px';
    }

    function imgout() {
        document.getElementById('tooltip').style.display = 'none';
    }
</script>
<body>
<div id="container">
    <div id="tooltip">Tooltip Text</div>
    <div class="clip">
        <img onmouseover="imgover(this, 'Tip 1')" onmouseout="imgout()"/>
        <img onmouseover="imgover(this, 'Tip 2')" onmouseout="imgout()"/>
        <img onmouseover="imgover(this, 'Tip 3')" onmouseout="imgout()"/>
    </div>
</div>
</body>

关于javascript - 使子元素出现在父元素之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7363088/

javascript使34tooltipgtcss

有关javascript - 使子元素出现在父元素之外的更多相关文章

  1. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  2. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  3. ruby - 使用 rbenv 和 ruby​​-build 构建 ruby​​ 失败，出现 undefined symbol : SSLv2_method - 2

    我正在尝试在配备ARMv7处理器的SynologyDS215j上安装ruby​​2.2.4或2.3.0。我用了optware-ng安装gcc、make、openssl、openssl-dev和zlib。我根据README中的说明安装了rbenv(版本1.0.0-19-g29b4da7)和ruby​​-build插件。.这些是随optware-ng安装的软件包及其版本binutils-2.25.1-1gcc-5.3.0-6gconv-modules-2.21-3glibc-opt-2.21-4libc-dev-2.21-1libgmp-6.0.0a-1libmpc-1.0.2-1libm

  4. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  5. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. arrays - 计算数组中的匹配元素 - 2

    给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

  8. ruby - 使用 Nokogiri 和 Ruby 命名元素 "text" - 2

    我在尝试使用Nokogiri构建XML文档时遇到了一个小问题。我想将我的元素之一称为“文本”(请参阅​​下面粘贴代码的最底部)。通常，要创建一个新元素，我会执行类似以下的操作xml.text--但它似乎是.text是Nokogiri已经用来做其他事情的方法。因此，当我写这行时xml.textNokogiri没有创建名为的新元素但只是写了意味着成为元素内容的文本。我怎样才能让Nokogiri实际制作一个名为的元素？？builder=Nokogiri::XML::Builder.newdo|xml|xml.TEI("xmlns"=>"http://www.tei-c.org/ns/1.0"

  9. ruby - 为什么 return 关键字会导致我的 'if block' 出现问题？ - 2

    下面的代码工作正常:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson)do|key,oldv,newv|ifkey==:aoldvelsifkey==:bnewvelsekeyendendputskerson.inspect但是如果我在“ifblock”中添加return，我会得到一个错误:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson

  10. ruby - 为什么允许在 Ruby 类之外定义全局方法？ - 2

    我读过这个:Let’sstartwithasimpleRubyprogram.We’llwriteamethodthatreturnsacheery,personalizedgreeting.defsay_goodnight(name)result="Goodnight,"+namereturnresultend我的理解是，方法是定义在类中的函数或子程序，可以关联到类(类方法)或对象(实例方法)。那么，如果它不是在类中定义的，怎么可能是方法呢？ 最佳答案 当你在Ruby中以这种方式在全局范围内定义一个函数时，它在技术上变成了Obje

随机推荐