Question

一旦我的鼠标光标到达屏幕上显示的一块奶酪，我必须在鼠标图像的右上角出现一个图像。我有图像的代码出现在鼠标图像上，我使用display：none来隐藏。一旦我用光标到达左上角的奶酪片，我该怎么办才能使图像显示在鼠标图像上？我想我应该可以使用悬停属性，但我不知道如何用它实现我的目标。任何提示或建议将不胜感激。

<style>
#myCanvas { border: #333 10px solid;
			position: relative; 
			}

body { padding: 50px; }

#cheese { position: absolute;
		  padding-left: 10px;
		  }
		  
#mouse { position: absolute;
		 padding-top: 390px; 
		 padding-left: 520px; 
		 }

#line { position: absolute;
		  padding-left: 90px;
		  padding-top: 90px;
		  }
		  
#text1 { position: absolute;
		padding-top: 450px;
		padding-left: 130px;
 }
 
#text2 { position: absolute;
		padding-top: 500px;
		padding-left: 110px;
 }

#img { position: absolute; 
	   display: none;
	   padding-top: 390px; 
	   padding-left: 525px;
 }

</style>

<body>
<p>
<div id="cheese">
<img src="cheese 2.jpg" alt="cheese" width="120" height="120">
</div>
</p>
<div id="mouse">
<img src="ballet mouse.jpg" alt="Angelina Ballerina" width="190" height="220">
</div>
<div id="line">
<img src="316151-200.png" alt="Pathway" width="480" height="350">
</div>
<div id="text1">
<img src="help.png" alt="text" width="350" height="50">
</div>
<div id="text2">
<img src="find.png" alt="text" width="400" height="55">
</div>
<div id="img">
<a href="#"><img src="MouseEventImg.jpg" alt="Celebrate!" width="190" height="220">
</div>
<canvas id="myCanvas" width="700px" height="600px"></canvas>
<script>
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");	
var canvasPos = getPosition(canvas);
var mouseX = 670;
var mouseY = 570;

canvas.addEventListener("mousemove", setMousePosition, false);

function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;
}

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height); 

  context.beginPath();
  context.arc(mouseX, mouseY, 30, 0, 2 * Math.PI, true);
  context.fillStyle = "#eab4e4";
  context.fill();
	
  requestAnimationFrame(update);
}
update();

//make mouse position values accurate
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;
 
  while (el) {
	if (el.tagName == "BODY") {
		//deal with browser quirks with body/window/document and pg scroll
		var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
		var yScroll = el.scrollTop || document.documentElement.scrollTop;
		
		xPos += (el.offsetLeft - xScroll + el.clientLeft);
		yPos += (el.offsetTop - yScroll + el.clientTop);
	} else {
		//for all other non-BODY elements
		xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
		yPos += (el.offsetTop - el.scrollTop + el.clientTop);
	}
	
	el = el.offsetParent;
	}
	return {
		x: xPos,
		y: yPos
	};
}  

</script>
</body>

Answer 1

如果我理解你的问题，这是实现这个目标的简单方法：

制作一些带奶酪的容器：

<div class='something'>
  <div class='some-cheese'></div>
</div>

如果将鼠标悬停在该容器上，请显示奶酪：

.something {
  width: 100px;
  height: 100px;
  background: #000;
}
.something .some-cheese {
  width: 50px;
  height: 50px;
  background: #FF0;
  opacity: 0;
  transition: opacity 1s;
}
.something:hover .some-cheese {
  opacity: 1;
}

在css中，当您将鼠标悬停在visibe图像上时，如何显示隐藏的图像？

1 个答案: