我正在做一个项目,并且images
在网站上有一些。当我将鼠标hover
移到这些鼠标上时,它们会被删除,但我希望它们被隐藏。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background: #ffff00 content-box;
padding:10px;
}
img {
border-style: solid;
border-color: black;
border-width: 1px;
padding: 10px;
border-radius: 5px;
box-sizing: content-box;
width: 200px;
height: 200px;
box-sizing: content-box;
}
img:hover {
display: none;
padding: 0px;
width: 120px;
height: 120px;
box-sizing: content-box;
box-shadow: #ff0015 inset;
}
</style>
</head>
<body><img src="7.PNG" alt="ALI"><img src="8.jpg" alt="MOH"><img src="9.jpg" alt="KARIM"></body>
</html>
我不明白您要做什么,您是否要在图像悬停中隐藏图像而不删除它?也许这可以使用opacity属性为您工作:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background: #ffff00 content-box;
padding:10px;
}
img {
border-style: solid;
border-color: black;
border-width: 1px;
padding: 10px;
border-radius: 5px;
box-sizing: content-box;
width: 200px;
height: 200px;
box-sizing: content-box;
}
img:hover {
opacity: 0;
width: 120px;
height: 120px;
box-sizing: content-box;
box-shadow: #ff0015 inset;
}
</style>
</head>
<body><img src="7.PNG" alt="ALI"><img src="8.jpg" alt="MOH"><img src="9.jpg" alt="KARIM"></body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句