Question

我有一个div类别相同的列表。每个div包含其他div，.header，.body，.footer。当我将鼠标悬停在一个div内的一个元素上时，例如.header，我需要在同一div内的另一个.footer元素上添加/删除一个类。

问题是，当我将鼠标悬停在一个.header上时，我正在将类添加到所有其他div内的所有.footer元素中，但是我只需要将新类添加到{当前格。

.footer

$(document).ready(function() {
  $('.header').hover(function() {
    $('.footer').addClass('active');
  }, function() {
    $('.footer').removeClass('active');
  });
});

Answer 1

您可以在CSS中使用driver.get("http://automationpractice.com/index.php?id_product=4&controller=product"); driver.manage().window().maximize(); driver.manage().timeouts().implicitlyWait(4, TimeUnit.SECONDS); driver.findElement(By.xpath(".//*[text()='Add to cart']")).click(); WebElement elementButton = new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//a[contains(@title,'Proceed to checkout')]"))); elementButton.click();伪函数和常规的同级组合器选择器:hover

.list_item:hover .header:hover ~ .footer {
  background: red;
}

否则，如果您不能依靠<div class="list"> <div class="list_item"> <div class="header">Hover me</div> <div class="body">B</div> <div class="footer">F</div> </div> <div class="list_item"> <div class="header">Hover me</div> <div class="body">B</div> <div class="footer">F</div> </div> <div class="list_item"> <div class="header">Hover me</div> <div class="body">B</div> <div class="footer">F</div> </div> </div>作为下一个兄弟姐妹，请使用jQuery

.footer

jQuery(function($) {

  $('.header').hover(function() {
    $(this).closest('.list_item').find('.footer').toggleClass('active');
  });
    
});

.active {
  background: red;
}

Answer 2

您应该相对于this（当前悬停的标头）执行此操作，并且如果这是分组中的唯一页脚，则可以使用nextAll：

$('.header').hover(function() {
    $(this).nextAll('.footer').addClass('active');
  },
  function() {
    $(this).nextAll('.footer').removeClass('active');
  });

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">

  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>
  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>
  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>

</div>

Answer 3

是的，下面的代码段可以尝试，我已经测试过了。

$(document).ready(function() {     
    $('.header').hover(function(){     
        $(this).siblings(".footer").addClass('active');    
    },     
    function(){    
        $(this).siblings(".footer").removeClass('active');      
    });
});

Answer 4

您需要为所有div添加不同的ID属性，获取$('#footer3')并进行更改

需要在另一个div悬停时将类添加到div

4 个答案: