Question

我有以下代码，基本上我正在尝试更改位于另一个div内的div的css，并且当需要更改的div位于悬停项上下文之外的另一个div内时，无法使其响应

<style>
    p.hometown:hover > #test  { 
        background: yellow;
    }

#test {   background: blue;}

</style>
</head>
<body>

<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>

<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>
<div id="tt">
<div id="test">dfgfdg</div></div>

我尝试了多种方法，例如：

p.hometown:hover #tt+#test  { 
    background: yellow;
}

也

p.hometown:hover > #test  { 
    background: yellow;
}

这些尝试均无效。如果我删除div tt，那么它将正常工作。问题是我试图在平方空间上使用此方法来解决那里的限制。没有JAVASCRIPT，也不能仅更改HTML CSS更改。

Answer 1

您几乎是个好主意，但您需要首先定位父div。您也可以使用~而不是+来使所有p类.hometown的{{1}}都可以使用：

p.hometown:hover ~ #tt > #test {
  background: yellow;
}

#test {
  background: blue;
}

<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>

<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>
<div id="tt">
  <div id="test">dfgfdg</div>
</div>

悬停更改div上的CSS

1 个答案: