Как подать заявку ребенок: hover, но не родитель: hover - PullRequest
Новая
       22

Как подать заявку ребенок: hover, но не родитель: hover

11 голосов
/ 23 апреля 2010

При следующем html при наведении курсора на дочерний элемент я получаю зеленый фон для родительского элемента. Как я могу остановить это? Мне нужен зеленый фон, если я нахожусь за пределами дочернего элемента.

CSS3 в порядке. 

<style>
        .parent { padding: 100px; width: 400px; height:400px; }
        .parent:hover { background-color: green; }
        .child { padding: 100px; width: 200px; height:200px; }
        .child:hover { background-color: blue; }
</style>
<div class="parent">
        <div class="child">Child</div>
</div>

Ответы [ 5 ]

8 голосов
/ 23 апреля 2010

Так что это действительно ужасно, но это работает (вроде).Я в основном создаю дубликат родителя как родного брата ребенка.Перезапись родителя по умолчанию скрыта, а затем отображается при наведении на дочерний элемент.Chrome не понравится, если вы не используете селектор + вместо селектора ~.Это не очень масштабируемо, но это может сработать.

Как написали другие парни, javascript, вероятно, будет лучшим решением.

2 голосов
/ 23 апреля 2010

Я могу сделать это только с добавлением дополнительной разметки. Нужно добавить пустой div, который по существу функционирует как родительский фон. Посмотрите на CSS здесь.

HTML Part : 

  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>

CSS-часть : 

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

http://jsbin.com/ubiyo3/edit

1 голос
/ 23 апреля 2010

Это невозможно при использовании простого ванильного CSS. Вы просите псевдокласс ребенка (child:hover), чтобы повлиять на объявление background родителя. Там нет никакого способа указать такого рода вещи с помощью обычного CSS.

Это определенно можно сделать с помощью JavaScript.

1 голос
/ 23 апреля 2010

Самое простое, что можно сделать, это использовать JS для такого рода CSS. Может быть, вы можете попытаться переосмыслить свою реализацию. Почему вы пытаетесь сделать что-то подобное?

0 голосов
/ 06 февраля 2012

У меня есть то, что я считаю лучшим решением, поскольку оно масштабируется до большего количества уровней, сколько нужно, а не только до двух или трех.

Я использую границы, но это также может быть сделано с любым стилем, например, background-color.

С границей идея состоит в том, чтобы:

  • У другого цвета границы есть только один div, div над тем, где находится мышь, а не над любым родителем, ни над любым потомком, поэтому можно видеть только такую ​​границу div другого цвета, в то время как остальные остаются белыми.

Вы можете проверить это по адресу: http://jsbin.com/ubiyo3/13

А вот и код: 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>
...