当我使用纯CSS将div悬停在其他div中时更改div

时间:2016-01-15 11:13:27

标签: html css

我有以下HTML代码:

<div class='container-1'>
 <div class='div-1'></div>
 <div class='div-2'></div>
 <div class='div-3'></div>
</div>
<div class='container-2'>
 <div class='div-1'></div>
 <div class='div-2'></div>
 <div class='div-3'></div>
</div>

当我将鼠标悬停在container-1中的div-1上时,我需要在容器-2中更改div-1。 我不能用JS。

有人可以帮助我吗?

由于

1 个答案:

答案 0 :(得分:0)

不,你不能,不是纯CSS。

但你可以通过将\documentclass{article} \usepackage{tikz} \newcommand{\equic}[2][1 cm]{ \draw (0,0) circle (#1); \pgfmathparse{#1/1 cm+0.25}; \edef\oc{\pgfmathresult cm}; \foreach \i in {1,...,#2} { \coordinate (N\i) at (-\i*360/#2:#1); \coordinate (NB\i) at (-\i*360/#2-180/#2:#1); \fill[black] (N\i) circle (0.05 cm); \fill[black] (NB\i) circle (0.05 cm); \draw (-\i*360/#2:\oc) node{$\i$}; \draw (-\i*360/#2-180/#2:\oc) node{$\bar{\i}$}; } } \begin{document} \begin{tikzpicture} \equic[5 cm]{6} \draw (N1) -- (N2) -- (N3) -- (N1); \draw (NB4) -- (NB5); \end{tikzpicture} \end{document} 悬停来实现。

.container-1
.container-1:hover + .container-2 .div-1 {
  background-color:red;
}