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

【问题标题】：In css, How do you display an image that is hidden when you hover over a visibe image?在css中，当您将鼠标悬停在可见图像上时，如何显示隐藏的图像？
【发布时间】：2018-05-04 08:00:39
【问题描述】：

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

<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>

【问题讨论】：

标签： javascript html css html5-canvas

【解决方案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;
}

【讨论】：