Html 我可以只使用CSS将这个元素定位在悬停状态吗？

我有一个I标记，我想在悬停按钮标记时设置它的样式。 这是我的结构：

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

悬停

目标

这是否仅适用于CSS？（我知道如何使用JS/jQuery）

我想我是想把目标锁定在这里，哈哈

更具体地说，我希望在悬停按钮时将目标文本设置为绿色：

a、 容器{边框：1px纯黑色；显示：块；}
a、 容器：悬停{边框颜色：红色；}
a、 容器：悬停PI{颜色：黄色；}
窗体按钮：悬停{color:red；}
窗体按钮：悬停PI{color:green；}/*不工作*/
.origin:hover.destination{color:green；}/*不工作*/
悬停

目标

如果您只希望鼠标悬停在按钮上，则css指针事件可以执行以下操作：

.container {
    pointer-events: none;
}

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

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

---

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

---

如果您正在寻找一个普通javascript脚本，我已经创建了一个fiddle

如果您只希望鼠标悬停在按钮上，那么css指针事件可以做到这一点：

.container {
    pointer-events: none;
}

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

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

---

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

---

如果您正在寻找一个普通的javascript脚本，我已经创建了一个fiddle，您必须使用jquery/js来实现这一点

在css样式的

类中使用
onmouseover
和
onmouseout
和
addClass/removeClass


函数func（）{
$（“.destination”）.addClass（“悬停”）；
}
函数外部（）{
$（“.destination”）.removeClass（“悬停”）；
}
。悬停{
颜色：红色；
}

悬停

目标

您必须使用jquery/js进行此操作

在css样式的
类中使用
onmouseover
和
onmouseout
和
addClass/removeClass


函数func（）{
$（“.destination”）.addClass（“悬停”）；
}
函数外部（）{
$（“.destination”）.removeClass（“悬停”）；
}
。悬停{
颜色：红色；
}

悬停

目标

我想我找到了答案。。。不你使用jquery吗？我想我找到了答案。。。不你用jquery吗？等等，这真的很好！但我不太明白。。。我修改了我的问题，使之更具体。如果这是一个解决方案，如果您能更新您的小提琴，将不胜感激！：）哦，所以我认为您正在禁用容器上的默认悬停以使其工作。我想让悬停在容器上的工作和悬停在原点上的工作，分开。悬停容器使目标为黄色，悬停原点使目标为绿色。将鼠标悬停在容器和源代码上仍然会导致它们中的每一个更改自己的样式…是的，这种行为超出了纯css的范围，对不起。我会试着在早上带着一个没有jquerywait的js解决方案回来，这真的很好！但我不太明白。。。我修改了我的问题，使之更具体。如果这是一个解决方案，如果您能更新您的小提琴，将不胜感激！：）哦，所以我认为您正在禁用容器上的默认悬停以使其工作。我想让悬停在容器上的工作和悬停在原点上的工作，分开。悬停容器使目标为黄色，悬停原点使目标为绿色。将鼠标悬停在容器和源代码上仍然会导致它们中的每一个更改自己的样式…是的，这种行为超出了纯css的范围，对不起。我会尝试在早上带着一个不带jQueryes的js解决方案回来我看到了一个不错的解决方案，我投票支持这个我留下这个答案给其他更喜欢这个解决方案的OP我实际上是在寻找一个只使用CSS的解决方案：-（在OP的澄清之后，这又回到了需要js解决方案的地步。是的，我看到了不错的解决方案，我投了更高的票，我坚持这个答案，而其他OP更喜欢这个解决方案。我实际上是在寻找一个CSS唯一的解决方案：-（在OP的澄清之后，这又回到了需要js解决方案的地步。