时间戳

首页 > 解决方案 > 当我指向鼠标时，CSS悬停不起作用 - 没有任何反应

html - 当我指向鼠标时，CSS悬停不起作用 - 没有任何反应

问题描述

出于某种原因，CSS 悬停不起作用。我尝试使用负 z-index 隐藏在 div 后面，这些 div 可能会“覆盖”我的悬停元素（在某个论坛上找到）但仍然相同。

我试图实现的结果 - 当我将鼠标悬停在右侧和左侧的动画元素上时，它应该显示 2 个按钮，我应该能够将其用作导航栏的一部分。

.header-container {}

.borderright {
  display: none;
  width: 250px;
  height: 70px;
  position: fixed;
  right: 0%;
  top: 50%;
  background-color: rgb(0, 0, 0);
  border: 1px solid white;
  color: white;
  float: right;
}

.testright {
  position: fixed;
  top: 50%;
  right: 2%;
}

.testright:hover+.borderright {
  display: block;
}
<div class="testright">
  This is the parent div which should trigger display:block with animated child
  <div class="dot-carousel">
    dot-carousel described in separate css file(animation)
  </div>
</div>

<div class="header-container">
  <div class="borderright">
    <div class="hero-image-right">
      <img src="assets/images/portfolio-dots.png" alt="">
    </div>
    <a href="#">
      <span class="spanright">Hidden clickable button that should appear on hover</span>
    </a>
  </div>
</div>

标签： htmlcss

解决方案

这是你想要达到的目标吗？

.testright:hover + .header-container .borderright{
    display: block; 
}

选择器的目标.borderright是.testright:hover当.borderright兄弟元素的子元素时的兄弟元素.header-container

推荐阅读