代码之家 › 专栏 › 技术社区 › oliver_siegel

我可以只使用css在悬停时将此元素作为目标吗?

hover css3 css html

oliver_siegel · 技术社区 · 6 年前

我有一个i标签,当鼠标悬停在按钮标签上时,我想将其设置为样式。这是我的结构:

<a class="container">
  <form>
    <button class="origin">HOVER</button>
  </form>
  <p>
    <i class="destination">TARGET</i>
    <p>
</a>

仅使用CSS是否可以?(我知道如何使用JS/jQuery进行此操作)

我想我要找的目标是表演者,哈哈…

更具体地说,我希望在悬停按钮时使目标文本颜色为绿色:

<style>
    a.container{ border: 1px solid black; display: block; }
    a.container:hover{border-color: red; }
    a.container:hover p i{color: yellow; }
    a form button:hover{ color: red; }
    a form button:hover p i{ color: green; } /* not working... */
    .origin:hover .destination{ color: green; } /* not working... */
</style>
<a class="container">
  <form>
    <button class="origin">HOVER</button>
  </form>
  <p>
    <i class="destination">TARGET</i>
    <p>
</a>

2 回复 | 直到 6 年前

HorusKol 6 年前

如果只希望鼠标悬停在按钮上时出现悬停效果,则CSS指针事件可以执行此操作:

.container {
    pointer-events: none;
}

.container .origin {
    pointer-events: auto;
}

.container:hover .destination {
    color: #00cc00;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

但是,由于您希望在鼠标悬停在容器上时有一个悬停效果,而在鼠标悬停在按钮上时有另一个悬停效果,因此需要使用javascript。

如果你在寻找一个普通的javascript脚本,我已经创建了一个小提琴 https://jsfiddle.net/j6hs5fmL/40/

××× × ×××× 6 年前

您必须为此使用jquery/js….

使用 onmouseover 和 onmouseout 和 addClass/removeClass 在CSS样式中 class

function func(){
  $(".destination").addClass("hovering");
}
function outer(){
 $(".destination").removeClass("hovering");
}

.hovering{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="container">
  <form>
    <button class="origin" onmouseover="func()" onmouseout="outer()">HOVER</button>
  </form>
  <p>
    <i class="destination">TARGET</i>
    <p>
</a>