Css - выбор близлежащего элемента при наведении не работает

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

Не могли бы вы выложить фрагмент, который работает (т.е. показывает проблему).

— 11.12.2020 17:29

css css-selectors selector

11.12.2020 17:20

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я понимаю, что селектор ~ предназначен для выбора близлежащих элементов

Ну, точнее, для выбора последующих братьев и сестер. Ваши .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>

11.12.2020 17:57

Другие вопросы по теме

Как я могу переключиться на iframe с помощью Selenium и python?

Как получить href из класса с помощью python?

Нажмите на ярлык Автоматизация Selenium

Фоновое изображение не меняется для каждого слайда

Селектор Css> + #id + путаница в синтаксисе при наведении

:first-child с вложенными элементами

Как нажать кнопку для сканирования отзывов с помощью python

Почему для работы этого стиля списка выбора требуется селектор CSS :invalid?

Нажмите и загрузите файл Excel с Selenium с Python

Selenium Python выбирает и щелкает несколько элементов флажка по типу ввода

Css - выбор близлежащего элемента при наведении не работает

Ответы 1

Другие вопросы по теме

Похожие вопросы