个人中心
gpt4 book ai didi

javascript - 应用 z-index 时悬停状态不起作用

转载 作者：行者123 更新时间：2023-11-28 05:10:40 27 4
gpt4 key购买 nike

问题是我有 2 个 div:一个容器一个链接，另一个容器形状的容器。链接有一个 position:fixed; 并且它飞过容器 div，所以我试图给链接一个负值的 z-index，结果是当为 anchor 应用负值的 z-index 时，悬停状态不起作用除非我滚动容器 div 的相同高度。所以我滚动了 3 次，悬停状态再次起作用。

HTML

<div id="div-1">
 <div class="container"></div>
</div>

<!-- other divs like 5 or 6 of 'em -->

<div id="div-2">
 <a href="#">This is a link</a>
</div>

CSS

#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;
}

#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
 }

重要的是:容器被 Jquery 隐藏，除非我点击某个按钮。

$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
    var target = $(e.target);
if (!target.is("##button-f")) {
  $(".container").toggle();
}
});
});

this is an illustrative image have a look

我已经使用了我能想到的所有可能的(其他想法)。我试图做相反的意思给容器一个 z-index 正值并离开 anchor ，但这留下了同样的问题

更新我将尝试更改 css 属性“z-index”，但仅当容器按钮打开时才可以

因此该链接将具有 z-index:-9; 但只有当容器被切换为可查看且当它被切换回关闭时，z-index 才会被删除或不应用。我真的不知道这将如何用 jquery 编写我试过了

    $(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle(); 

$("#div-2 a").css("z-index", -9); 

    var target = $(e.target);
if (!target.is("##button-f")) {
  $(".container").toggle();
}
});
});

只有当我在 z-index 上切换容器时才会应用此结果，但是当我切换它时它仍然存在，如何删除 z-index 或使其等于 z-inedx:99; 容器何时关闭？

仅对问题的任何其他答案表示赞赏。

最佳答案

不清楚您到底想要什么，但图片有所帮助，虽然看起来您想要容器上方的链接，但看起来好像您不需要？

the whole purpose is to make the anchor in a lower index, so when the container is toggled on/ viewed, the link won't be setting on top of the container.

但是您希望链接始终在鼠标悬停时使用react。所以我假设您无法弄清楚为什么当容器打开时它没有悬停并且您仍然可以看到链接，因此从逻辑上讲您希望至少能够悬停在链接的可见部分上。

  1. 它不是 jQuery，也不是 .container。它是 .container 的容器 A.K.A. #div-1。 #div-1 宽度始终为 100%，即使您没有那种样式，它仍然是 100%，因为如果没有为其指定明确的宽度，这就是 block 所具有的宽度。
    • 解决方案:给 #div-1 一个更小的宽度。
  2. 您有固定链接但没有坐标。你不能指望一个固定的元素能站在地面上，如果它不知道该站在哪里，它的行为就像一个固定的元素。此外，如果您有任何 positioned 元素，并且您希望其他元素之间进行交互，也让这些元素定位，div-1 现在是 position:relative 以及链接和 div-1 的 z-index 属性现在可以正常运行。
    • 解决方案:给 #div-2 a top 和 left or right 和 bottom 属性。为 #div-1 提供一个 position 属性，以便 z-index 正常运行。

所有细节都在源代码中进行了注释。

PLUNKER

片段

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
    }
    #div-1 {
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      border: 1px solid red;
      width: 200px;
      /*Enable this and it will block link*/
      /*width:100%;*/
      height: 290px;
    }
    .container {
      /* This saves you an unnecessary step in jQuery */
      display: none;
      width: 200px;
      height: 290px;
      background: orange;
    }
    #div-2 a {
      width: 13%;
      height: auto;
      padding: 0.5em 2.3em;
      display: block;
      position: fixed;
      font-weight: 500;
      font-size: 1.09em;
      text-align: center;
      background-color: none;
      text-decoration: none;
      outline: none;
      /* It's not clear whether you want the link above or
      | below the container. If above, simply change to
      | z-index: 2
      */
      z-index: 0;
      /* If you have a fixed element give it coords, otherwise       
      | it doesn't know where it should stand and behavior
      | will be unexpected.
      */
      top: 10%;
      left: 125px;
    }
    #div-2 a:hover {
      background: red;
      color: white;
    }
    /* FLAG is just to test the accessibility of the link */
    #FLAG {
      display: none;
    }
    #FLAG:target {
      display: block;
      font-size: 48px;
      color: red;
    }
  </style>
</head>

<body>
  <button id='button-f'>F</button>
  <div id="div-1">
    <div class="container">Container is open</div>
  </div>

  <!-- other divs like 5 or 6 of 'em -->

  <div id="div-2">
    <a href="#FLAG">This is a link</a>
    <span id='FLAG'>This link is accessible now!</span>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    /* This is the jQuery you need to accomplish what you want.
    | The rest was redundant and unnecessary.
    */
    $(document).ready(function() {

      $("#button-f").click(function(e) {
        $(".container").toggle();

      });

    });
  </script>
</body>

</html>

关于javascript - 应用 z-index 时悬停状态不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39582090/

27 4 0
文章推荐： c++ - 在 C++ Builder 中检测绘制线的窗口坐标的最佳方法
文章推荐： c++ - 多线程 - 效率降低，可能由 `false sharing` 引起
文章推荐： c++ - __forceinline 和内联用法
文章推荐： c++ - 迭代冒泡排序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com