Question

我是css特别是组合器的新手，并且在使用一些嵌套的div，ul和li元素的css时遇到了一些麻烦

这是我的代码的摘要。我正在尝试使用类“G”将li转换为带有“H”类的div的css。因为整个事情都在一个div中，类为“A”我假设这只能用css完成，但我无法弄清楚语法。我也对任何JavaScript解决方案持开放态度。

HTML

<div class="A">
    <div class="B otherClasses">
        <div class="C otherClasses">
            <div class="D otherClasses">
                ...SOMECODE...
            </div>
            <div class="E otherClasses">
                <ul class="F otherClasses">
                    <li>...SOMECODE...</li>
                    <li>...SOMECODE...</li>
                    <li class="G">...SOMECODE...</li>
                    <li class="G">...SOMECODE...</li>
                    <li class="G">...SOMECODE...</li>
                    <li>...SOMECODE...</li>
                    <li class="G">...SOMECODE...</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="H"></div>
</div>

Answer 1

答案的一个vanilla javascript版本（在任何大型javascript库中保存加载非常简单）

＆＃13;

var g = document.querySelectorAll('.G');
var h = document.querySelector('.H');

for (var i = 0; i < g.length; i++) {
  g[i].addEventListener('mouseover', function() {
    h.textContent = 'hello!';
  });

  g[i].addEventListener('mouseout', function() {
    h.textContent = 'goodbye!';
  });
}

＆＃13;

<div class="A">
  <div class="B otherClasses">
    <div class="C otherClasses">
      <div class="D otherClasses">
        ...SOMECODE...
      </div>
      <div class="E otherClasses">
        <ul class="F otherClasses">
          <li>...SOMECODE...</li>
          <li>...SOMECODE...</li>
          <li class="G">...SOMECODE...</li>
          <li class="G">...SOMECODE...</li>
          <li class="G">...SOMECODE...</li>
          <li>...SOMECODE...</li>
          <li class="G">...SOMECODE...</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="H">TEST</div>
</div>

＆＃13;

Answer 2

不幸的是CSS选择器在这里没有帮助。如果你可以使用jQuery，一个选项是：

$('.G').on('mouseenter', function() {
    $(this).closest('.B').next('.H').addClass('...');
});

...是CSS类名称的占位符，用于修改元素的样式。

如果您要删除mouseleave事件中的课程：

$('.G').on('mouseenter mouseleave', function(e) {
    $(this).closest('.B').next('.H').toggleClass('...', e.type === 'mouseenter');
});

如果每个.H元素只有一个.A个后代，您还可以使用.find方法选择目标元素：

$(this).closest('.A').find('.H');

Answer 3

你不能用CSS做到这一点，但是使用JQuery，你可以做到。这里有两个函数，一个用于在悬停时更改颜色，另一个用于在不再悬停在该项目上时更改颜色。

＆＃13;

$('li.G').mouseover(function() {
  $('.H').css('color', 'red');
});

$('li.G').mouseout(function() {
  $('.H').css('color', 'black');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
    <div class="B otherClasses">
        <div class="C otherClasses">
            <div class="D otherClasses">
                ...SOMECODE...
            </div>
            <div class="E otherClasses">
                <ul class="F otherClasses">
                    <li>...SOMECODE...</li>
                    <li>...SOMECODE...</li>
                    <li class="G">...SOMECODE...</li>
                    <li class="G">...SOMECODE...</li>
                    <li class="G">...SOMECODE...</li>
                    <li>...SOMECODE...</li>
                    <li class="G">...SOMECODE...</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="H">TEST</div>
</div>

＆＃13;

如何在悬停在另一个不相关类的子类上时更改一个类的css？

3 个答案: