Менять цвет второго элемента при наведении на первый и наоборот - HTML и CSS

Скрип_двери · 01.02.2016, 20:14

Задача: есть два блока div1 - black, div2 - gray. Если наводим на div1 , то div2 становится голубым, eсли наводим на div2 , то div1 становится красным,

Это делается без js. Долго мучаюсь,не могу вспомнить, как это делал, а исходники потерях.

Код HTML:

<html>
  <head>
    <style>
      
      .div1{width: 100px; height: 200px; background: black;}
      .div2{width: 100px; height: 200px; background: gray;}
    </style>
  </head>
 
  <body>
 
      <div class="div1 "></div>
      <div class="div2 "></div>
 
  </body>
</html>

Буду очень признателен за вашу креативность.

Вадим Мошев · 01.02.2016, 21:46

Хорошая задача. Заставляет немного поломать мозги.
Вот то, что у меня получилось. Быть может, это и быдлокод, но работает.

(протестировать можно по этой ссылке: https://jsfiddle.net/vdszfpbu/)

Код HTML:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
	<head>
		<title></title>

    <style>
    #main {
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

    div {margin: 10px;} /*просто отступ, для понятности, на самом деле он не нужен*/

    #div1, #div2, #colorForDiv1 {
      width: 100px;
      height: 100px;
      
    }

    #div1  {
      background-color: black;

    }

    #div2 {
      background-color: gray;
    }

    #colorForDiv1 {
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      background-color: blue;
    }

    #div1:hover + div  {
      background-color: red;
    }

    #div2:hover #colorForDiv1 {
      display: block;
    }


    </style>
	</head>

	<body>


    <div id="main">
      <div id="div1"></div>

      <div id="div2">
        <div id="colorForDiv1"></div>
      </div>
    </div>


	</body>


</html>

Naive · 03.02.2016, 19:03

так правильней будет

01.02.2016, 20:14	#1
Скрип_двери Регистрация: 26.01.2016 Сообщений: 4	Менять цвет второго элемента при наведении на первый и наоборот Задача: есть два блока div1 - black, div2 - gray. Если наводим на div1 , то div2 становится голубым, eсли наводим на div2 , то div1 становится красным, Это делается без js. Долго мучаюсь,не могу вспомнить, как это делал, а исходники потерях. Код HTML: <html> <head> <style> .div1{width: 100px; height: 200px; background: black;} .div2{width: 100px; height: 200px; background: gray;} </style> </head> <body> <div class="div1 "></div> <div class="div2 "></div> </body> </html> Буду очень признателен за вашу креативность. Последний раз редактировалось Вадим Мошев; 09.05.2016 в 22:05.

03.02.2016, 19:03	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	так правильней будет Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Замена фона элемента при наведении курсора	ardor	C# (си шарп)	1	03.10.2013 23:52
var Key Press Delphi - при нажатии на клавиши менять цвет формы	Grimnir	Помощь студентам	6	29.03.2013 12:00
как менять ссылку при наведении на не курсором?	Luca Brasi	HTML и CSS	3	29.12.2012 23:13
Прорисовка элемента только при наведении курсора	Crystallon	Общие вопросы Delphi	3	15.05.2011 16:45
Изменить цвет ссылок при наведении	Gatti	HTML и CSS	1	01.10.2009 23:08