Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Изменение положения блока для применения свойств при наведении (https://javascript.ru/forum/xhtml-html-css/78852-izmenenie-polozheniya-bloka-dlya-primeneniya-svojjstv-pri-navedenii.html)

Georgie 13.11.2019 18:36
Изменение положения блока для применения свойств при наведении
 
Здравствуйте.
Мне надо сделать так, чтобы при наведении на блок "two" opacity можно было применить к "one". Это возможно, если да, то как?
Code:
HTML:
<div id = 'one'>
<div id = 'two'>
<div id = 'three'>
<div id = 'four'>
CSS:
#one:hover ~ #two, #one:hover ~ #three, #one:hover ~ #four{
opacity: 0.2
}
#two:hover{
z-index: 9999;
}
#two:hover ~ #one{
opacity: 0.2
}

При наведении на блок 'one', всё работает, но на блок two - нет. Кто знает, как исправить?

рони 13.11.2019 18:38
Цитата:
Сообщение от Georgie
чтобы изменить слой выше стоящего
нет такого в css

Georgie 13.11.2019 18:45
Цитата:
Сообщение от рони (Сообщение 515464)
нет такого в css
Я не так выразился. Мне надо сделать так, чтобы при наведении на блок "two" opacity можно было применить к "one"

рони 13.11.2019 18:47
Georgie,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    div{
        background-color: #FF00FF;
         height: 70px;
         width: 200px;
         margin: 5px;
    }
    fieldset:hover div{
        opacity: .2;
    }
    fieldset:hover div:hover{
        opacity: 1;
    }
    fieldset{
        width: 200px;
    }

  </style>

</head>

<body>
<fieldset>
<div id = 'one'></div>
<div id = 'two'></div>
<div id = 'three'></div>
<div id = 'four'></div>
</fieldset>
</body>
</html>

Georgie 13.11.2019 19:02
Спасибо :3


Часовой пояс GMT +3, время: 23:38.