css

Question

.circle-container {
    width: 200px;
    height: 200px;
    position: fixed;
    display: flex;
    left: 20%;
    top: 30%;
    margin-left: -100px;
    margin-top: -100px;
    transition: top, left 1s;
}
.circle-container-button {
    width: 200px;
    height: 200px;
    position: fixed;
    left: 20%;
    top: 30%;
    margin-left: -100px;
    margin-top: -100px;
}
.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 1s;
    opacity: 0.5;
}
.circle-container-button:hover {
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.circle-container-button:hover ~ .circle-container {
    top: 50%;
    left: 50%;
}
.circle-container-button:hover ~ .circle-container .a {
    transform: rotate(220deg) scale(6);
}
.circle-container-button:hover ~ .circle-container .b {
    transform: rotate(-280deg) scale(6);
}
.circle-container-button:hover ~ .circle-container .c {
    transform: rotate(180deg) scale(6);
}
.circle-container-button:hover ~ .circle-container .d {
    transform: rotate(-50deg) scale(6);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="base-container"> 
    <div class = "circle-container">
        <div class = "circle a">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" height="64" width="64"><path d="M8.467 0A8.467 8.467 0 00.745 5.01 8.287 8.287 0 017.27 1.817a8.287 8.287 0 018.288 8.288 8.287 8.287 0 01-1.423 4.639 8.467 8.467 0 002.798-6.276A8.467 8.467 0 008.467 0z" fill="#00f" fill-rule="evenodd"/></svg>
        </div>
        <div class = "circle b">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" height="64" width="64"><path d="M.842 6.284a7.937 7.937 0 00-.313 2.183 7.937 7.937 0 007.938 7.937 7.937 7.937 0 005.624-2.345 9.355 9.355 0 01-3.923.874A9.355 9.355 0 01.842 6.284z" fill="#0ff" fill-rule="evenodd"/></svg>
        </div>
        <div class = "circle c">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" height="64" width="64"><path d="M5.596 2.156a6.941 6.941 0 00-4.07 6.31 6.941 6.941 0 006.94 6.942 6.941 6.941 0 006.208-3.853 6.61 6.61 0 01-5.218 2.565 6.61 6.61 0 01-6.609-6.61 6.61 6.61 0 012.749-5.354z" fill="#ff0" fill-rule="evenodd"/></svg>
        </div>
        <div class = "circle d">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" height="64" width="64"><path d="M13.341 5.227a6.253 6.253 0 01.217 1.623 6.253 6.253 0 01-6.254 6.253 6.253 6.253 0 01-3.465-1.052 5.857 5.857 0 004.628 2.273 5.857 5.857 0 005.857-5.857 5.857 5.857 0 00-.983-3.24z" fill="purple" fill-rule="evenodd"/></svg>
        </div>  
    </div>
    <div class = "circle-container-button"></div>  
</div> 

</body>
</html>

悬停在圆形容器按钮上时，我需要修改圆形容器内的圆形元素，似乎可以正常显示，但仍然无法正常工作。下面是完整的代码。

我知道 ~ 选择器用于选择附近的元素，就像下面的代码一样。

我尝试将圆容器放在圆容器按钮内，并仅使用 .circle，它就是这样工作的。但我需要把按钮放在外面，靠近容器。

<html>
<body>
<style>
.circle-container {
    width: 200px;
    height: 200px;
    position: fixed;
    display: flex;
    left: 20%;
    top: 30%;
    margin-left: -100px;
    margin-top: -100px;
    transition: top, left 1s;
}
.circle-container-button {
    width: 200px;
    height: 200px;
    position: fixed;
    left: 20%;
    top: 30%;
    margin-left: -100px;
    margin-top: -100px;
}
.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 1s;
    opacity: 0.5;
}
.circle-container-button:hover {
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.circle-container-button:hover ~ .circle-container {
    top: 50%;
    left: 50%;
}
.circle-container-button:hover ~ .circle-container .a {
    transform: rotate(220deg) scale(6);
}
.circle-container-button:hover ~ .circle-container .b {
    transform: rotate(-280deg) scale(6);
}
.circle-container-button:hover ~ .circle-container .c {
    transform: rotate(180deg) scale(6);
}
.circle-container-button:hover ~ .circle-container .d {
    transform: rotate(-50deg) scale(6);
}
</style>


<div class="base-container"> 
    <div class = "circle-container">
        <div class = "circle a">
            <img src="circle1.svg">
        </div>
        <div class = "circle b">
            <img src="circle2.svg">
        </div>
        <div class = "circle c">
            <img src="circle3.svg">
        </div>
        <div class = "circle d">
            <img src="circle4.svg">  
        </div>  
    </div>
    <div class = "circle-container-button"></div>  
</div>

Answer 1

I understand that the ~ selector is for selecting nearby elements

嗯，更具体地说，它是为了选择后续的兄弟姐妹。你的 .circle-container 实际上是 circle-container-button 的兄弟姐妹，但他们是以前的兄弟姐妹。

这可能不是你今年想要的最好消息，但确实没有以前的兄弟选择器。因此，您可以选择将按钮放在图像之前，或者使用 css 来乱序显示元素。

我简化了您的代码以演示我所说的效果。

.button:hover ~ .container .element {
    color: red;
}

<div class = "container">
  <div class = "element">
    previous container: element a
  </div>
  <div class = "element">
    previous container: element b
  </div>
</div>
<div class = "button">button</div>           
<div class = "container">
  <div class = "element">
    subsequent container: element c
  </div>
  <div class = "element">
    subsequent container: element d
  </div>
</div>

扩展简化代码，这是丑陋的解决方案：

.button:hover ~ .container .element {
    color: red;
}

/* Makes the button appear after everything */
/* Even though in the markup it comes before */
.button {
  position: absolute;
  top: 100px;
}

<div class = "outer">
  <div class = "button">technically previous button</div>           
  <div class = "container">
    <div class = "element">
      subsequent container: element a
    </div>
    <div class = "element">
      subsequent container: element b
    </div>
    <div class = "element">
      subsequent container: element c
    </div>
    <div class = "element">
      subsequent container: element d
    </div>
  </div>
</div>

css - 在悬停时选择附近的元素不起作用

css - selecting nearby element on hover not working

css-selectors

selector