主页 / 问题 / 585808
Accepted
Виктория
Asked:2020-11-02 16:53:00 +0000 UTC2020-11-02 16:53:00 +0000 UTC

将悬停时的 div 背景更改为另一个

  • 772

有这段代码：

<div class="div1">
	<div class="div11">Текст</div>
</div>

<div class="div2">
	<div class="div12">Текст</div>
</div>

将鼠标悬停在 .div11 上时如何更改 div12 的背景。布局无法更改。

javascript

3 个回答

  1. Best Answer

    var div11 = document.querySelector('.div11');
var div12 = document.querySelector('.div12');

div11.addEventListener('mouseover', handle);
div11.addEventListener('mouseleave', handle2);

function handle() {
  div12.style.background = 'lightgreen';
}

function handle2() {
  div12.style.background = '';
}
    <div class="div1">
	<div class="div11">Текст</div>
</div>

<div class="div2">
	<div class="div12">Текст</div>
</div>

    • 2

  2. 不，如果你只使用 CSS - CSS 规则级联。只有将鼠标悬停在 上才有可能.div1，因为 它与 处于同一级别.div2。

    如果通过使用脚本，那么，例如，像这样：

    $('.div11').hover(
  function() {
    $('.div12').css('background', 'green')
  },
  function() {
    $('.div12').css('background', 'transparent')
  }
)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="div1">
	<div class="div11">Текст</div>
</div>

<div class="div2">
	<div class="div12">Текст</div>
</div>

    • 0

  3. 即使有更多行（并且没有 JavaScript）：

    div[class^="div"]:hover + div[class^="div"] > div {
  background: lime;
}
    <div class="div1">
  <div class="div11">Текст</div>
</div>

<div class="div2">
  <div class="div12">Текст</div>
</div>

<div class="div3">
  <div class="div13">Текст</div>
</div>

<div class="div4">
  <div class="div14">Текст</div>
</div>

<div class="div5">
  <div class="div15">Текст</div>
</div>

<div class="div6">
  <div class="div16">Текст</div>
</div>

    • 0

相关问题