css каскадные элементы того же класса, но парящие - PullRequest
Новая
       7

css каскадные элементы того же класса, но парящие

0 голосов
/ 10 февраля 2020

У меня есть соответствующий html код: 

<html>
  <body>
    <svg>
      <g class="projectGroup">
        <g class="projectElement">
          <rect width="10" height="10" y="0" style="fill:rgb(0,0,255);" />
          <g class="projectElement">
            <rect width="10" height="10" y="15" style="fill:rgb(0,0,255);" />
            <g class="projectElement">
              <rect width="10" height="10" y="30" style="fill:rgb(0,0,255);" />
            </g>
          </g>
        </g>
      </g>
    </svg>
  </body>
</html>

и зависание css: 

.projectElement:hover > rect {
 width:100px;
}

попробуйте это на JSFiddle

почему зависание влияет на родительские группы? Я просто хочу повлиять на один конкретный прямоугольник в группе

Ответы [ 3 ]

1 голос
/ 10 февраля 2020

Посмотри на это. На самом деле я не понимаю .projectElement: hover> rect: hover означает, но это работает !!! 

.projectElement:hover > rect:hover {
 width:100px;
}
<html>
  <body>
    <svg>
      <g class="projectGroup">
        <g class="projectElement">
          <rect width="10" height="10" y="0" style="fill:rgb(0,0,255);" />
          <g class="projectElement">
            <rect width="10" height="10" y="15" style="fill:rgb(0,0,255);" />
            <g class="projectElement">
              <rect width="10" height="10" y="30" style="fill:rgb(0,0,255);" />
            </g>
          </g>
        </g>
      </g>
    </svg>
  </body>
</html>
0 голосов
/ 10 февраля 2020

Но что, если вложенные теги действительно нужны? Тег SVG Group является точным примером такой необходимости. И каждый вложенный внутренний тег должен иметь одинаковый внешний вид.

Посмотрите. Если возможна маркировка n-го вложенного элемента, почему мы не можем пометить фактически наведенный тег? 

.red {
  color: green;
}

.red:first-of-type {
  color: red;
}
<div class="home">
  <p class="red">first
    <p class="red">second
      <p class="red">third
        <p class="red">fourth</p>
      </p>
    </p>
  </p>
</div>
0 голосов
/ 10 февраля 2020

Если вы измените способ размещения элементов SVG, так что каждый узел .projectElement является родственным элементом, то вы можете получить желаемый эффект.

Проблема в том, что CSS окружает каждый вложенный узел своим родителем, поэтому при наведении курсора на дочерний элемент вы также наводите курсор на его родительский элемент.

Использование родных братьев вместо предков позволяет CSS рассматривать каждый элемент в своем собственном контексте. 

.projectElement:hover > rect {
 width:100px;
}
<html>
  <body>
    <svg>
      <g class="projectGroup">
        <g class="projectElement">
          <rect width="10" height="10" y="0" style="fill:rgb(0,0,255);" />
        </g>
        <g class="projectElement">
          <rect width="10" height="10" y="15" style="fill:rgb(0,0,255);" />
        </g>
        <g class="projectElement">
          <rect width="10" height="10" y="30" style="fill:rgb(0,0,255);" />
        </g>
      </g>
    </svg>
  </body>
</html>
...