Question

我想要的是每当我在某个元素上mouseover将其样式从video设置为display: none;，然后将img设置为display: block; < / p>

这是我的代码：

JavaScript

document.addEventListener("DOMContentLoaded", function() {

    document.getElementById("container").addEventListener("mouseenter", function(event) {
        alternate(event);
    });
    document.getElementById("container").addEventListener("mouseout", function(event) {
        alternate(event);
    });

    function alternate(e) {
        var target = e.target || e.srcElement;
        if (target) {
            if (target.nodeName == "IMG") {
                target.querySelector(".video").style.display = "block";
                target.querySelector(".img").style.display = "none";
            } else if (target.nodeName == "VIDEO") {
                target.querySelector(".video").style.display = "none";
                target.querySelector(".img").style.display = "block";
            }
        }
    }

});

HTML

<div id="container">
        <li>
            <div>
                <video class="video" src="./test.mp4" type="video/mp4" muted autoplay></video>
                <img class="img" src="./test.jpg"></img>
            </div>
        </li>
        <li>
            <div>
                <video class="video" src="./test.mp4" type="video/mp4" muted autoplay></video>
                <img class="img" src="./test.jpg"></img>
            </div>
        </li>
</div>

基本上，我想要实现的是每当我从视频中mouseout放回图像，然后再放回图像。 video: hidden, image:shown至video:shown, image:hidden。

我确实设法通过使用target.previousSibling技术来使某项工作正常进行，但这种方法无法100％正常工作，

希望我对这个问题的格式正确，谢谢您的阅读。非常感谢您的帮助。

Answer 1

您可以使用纯CSS实现此目的。一个非常简单的方法是：

.hover-toggle {
  position: relative;
}

.hover-toggle .video {

  /* Use absolute positioning to place video along-side image */
  position: absolute;
  top: 0;
  left: 0;
  
  /* Set video to be transparent by default */
  opacity: 0;
}

/* When hovering the transparent video, cause it to become opaque */
.hover-toggle .video:hover {
  opacity: 1;
}

<div class="hover-toggle">
  <video class="video" src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" muted autoplay></video>
  <img class="img" src="https://via.placeholder.com/320x176" />
</div>

<div class="hover-toggle">
  <video class="video" src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" muted autoplay></video>
  <img class="img" src="https://via.placeholder.com/320x176" />
</div>

Answer 2

mouseenter和mouseleave是适合使用的事件。
如果您使用<li>，则必须使用<ol>或<ul>作为父项。

将事件注册到每个<li>

const items = document.querySelectorAll('li');
for (let item of items) {
  item.addEventListener('mouseenter', alternate);
  item.addEventListener('mouseleave', alternate);
}

使用e.target和.matches('li')定义事件处理程序，以确保事件仅适用于<li>。然后使用e.type确保只有mouseenter和mouseleave`事件适用。
```
const tgt = e.target;
const evt = e.type;

if (tgt.matches('li')) {
  if (evt === 'mouseenter') {
  ...
  else if (evt === 'mouseleave') {
  ...
}
```
target.previousSibling有时会起作用的原因是因为display: none从流中删除了元素，因此未被视为同级。尝试分配一个具有visibility和z-index属性的类，并在事件之间交替使用该类。
```
tgt.children[0].classList.add('on');
tgt.children[1].classList.remove('on');
// and vice versa
```

BTW <img>标签是空元素（没有结束标签 ~~</img>~~ ）

const items = document.querySelectorAll('li');

for (let item of items) {
  item.addEventListener('mouseenter', alternate);
  item.addEventListener('mouseleave', alternate);
}

function alternate(e) {
  const tgt = e.target;
  const evt = e.type;

  if (tgt.matches('li')) {
    if (evt === 'mouseenter') {
      tgt.children[0].classList.add('on');
      tgt.children[1].classList.remove('on');
    } else if (evt === 'mouseleave') {
      tgt.children[1].classList.add('on');
      tgt.children[0].classList.remove('on');
    } else {
      return false;
    }
  }
  return false;
}

li {
  position: relative;
  height: 135px;
}

li * {
  visibility: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.on {
  visibility: visible;
  z-index: 1;
}

<ul>
  <li>
    <video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005610.mp4' muted autoplay loop width='240' height='135'></video>
    <img class='on' src='https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png' width='240' height='135'>
  </li>
  <li>
    <video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4' muted autoplay loop width='240' height='135'></video>
    <img class='on' src='https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png' width='240' height='135'>
  </li>
</ul>

eventListener在两个元素之间进行更改

2 个答案: