Question

我有一个i标记，当我将按钮标记悬停时，我想为其设置样式。这是我的结构：

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

仅CSS可行吗？（我知道如何使用JS / jQuery）

我想我想在这里定位cousing元素，哈哈...

更具体地说，我希望将悬停在按钮上时TARGET文本变为绿色：

<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>

Answer 1

如果将鼠标悬停在按钮上时只希望悬停效果，则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/

Answer 2

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

以CSS样式onmouseover使用onmouseout和addClass/removeClass和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>

我可以仅使用CSS将鼠标悬停定位此元素吗？

2 个答案: