Question

我的网页中央有一个菱形的单元格，里面有动漫图片。当我将鼠标悬停在图像上方时，必须以指定的不透明度显示动画的标题图像，而当鼠标不在图像上方时，则不得显示标题图像。我使用了public class Token { private final AccessTokenClient tokenRetriever; private final Object monitor; private volatile boolean isExpired = true; private volatile String token = ""; public Token(AccessTokenClient tokenRetriever) { this.tokenRetriever = tokenRetriever; this.monitor = new Object(); } public String getToken() { if (this.isExpired) { synchronized (this.monitor) { // intended double check! if (this.isExpired) { this.token = this.tokenRetriever.retrieveToken(); this.isExpired = false; } } } return this.token; } }和onmouseenter()事件。但是当我将鼠标悬停在图片上时，标题图片就会闪烁/闪烁。谁能帮我，使标题图像不会闪烁？

onmouseleave()

function eraseName() {
  var x = document.getElementById('titleimage');
  x.style.display = 'none';
}

function displayName() {
  var x = document.getElementById('titleimage');
  x.style.display = 'block';
  x.style.opacity = '0.5';
}

img {
  width: 300px;
  height: 300px;
}

.container {
  background-color: grey;
  background-size: cover;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 20%;
  left: 40%;
  transform: rotateZ(-45deg);
}

Answer 1

有很多方法可以满足您的需求，但是使用CSS到目前为止最简单，并且还提供了其他显示选项，例如过渡。

这是一个例子。

#main-image,
#hover-image {
  left: 10px;
  position: absolute;
  top: 10px;
}

#hover-image {
  opacity: 0;
  transition: opacity 1s ease;
}

#hover-image:hover {
  opacity: 1; 
}

<img id="main-image" src="https://picsum.photos/id/454/300/300"/>
<img id="hover-image" src="https://picsum.photos/id/455/300/300"/>

docker exec -ti dev_chat-app_1 ./node_modules/mocha/bin/mocha './src/**/*.test.js' --opts './.mocha.opts'

onmouseenter和onmouseleave事件像地狱一样闪烁

1 个答案: