使用hoven可见性：隐藏;眨眼 [英] Using hoven visibility: hidden; is blinking
本文介绍了使用hoven可见性：隐藏;眨眼的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经尝试并搜索了许多网站以解决我的问题，但仍然没有奏效。
我有2张图片，第一张比第二张更大，我想第二张时出现，第一张在鼠标移动到第一张图片时消失。
我的元素如下：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title>< / title>
< style>
表，{
保证金：0px auto;
边框：1px纯黑色;
填充：1px;
}
th
{
vertical-align：top;
宽度：250px;
身高：250像素;
display：inline-block;
}
img
{
position：absolute;
剪辑：rect（0px 200px 200px 0px）;
填充：1px;
display：block;
margin-right：5px;
margin-left：25px;
}
.picture1 {
position：relative;
宽度：100％;
max-width：500px;
}
.picture1：悬停{
visibility：hidden;
}
.overlay1 {
position：absolute;
top：0;
底部：0;
左：0;
右：0;
身高：100％;
宽度：100％;
不透明度：0;
过渡：0.3s轻松;
}
.overlay1：悬停{
opacity：1;
}
< / style>
< / head>
< body>
< table>
< tr>
< th>
KING< br>
< a href =target =_ blank>
< div class =picture1>
< img src =1.jpgalt =头像width =200height =auto>
< div class =overlay1>
< img src =5-1.jpgalt =头像width =200height =auto>
< / div>
< / div>
< / th>
< / tr>
< / table>
< / body>
< / html>
我尝试过：
可见性：隐藏;
不透明度：1;
解决方案
使用此代码，它将起作用..
< ！DOCTYPE html >
< html >
< head >
< 样式 类型 = text / css >
。 imgBox {
width： 600px;
height < span class =code-keyword>： 300px;
background < span class =code-keyword>： url（https://www.newstriger.com/wp-content/uploads/2017/11/What-is- a-corporate-life-Funny-Quotes.jpg）no-repeat;
}
。 imgBox：hover
{
width ： 600px;
height ： 300px;
background ： url（https： //www.newstriger.com/wp-content/uploads/2017/01/Long-and-healthy-hair-tips-in-hindi.jpg）no-repeat;
}
< / style >
< / head >
< body >
< div < span class =code-attribute> class = imgBox > < / div >
< / body >
< / html >
I have tried and searched many website to solve my problem, but still does not worked.
I have 2 pictures, first one is larger than second one, I want when the second one appear, the first one is disappear when the mouse move onto the first picture.
there are my element as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table, th {
margin:0px auto;
border: 1px solid black;
padding: 1px;
}
th
{
vertical-align: top;
width:250px;
height:250px;
display: inline-block;
}
img
{
position: absolute;
clip: rect(0px 200px 200px 0px);
padding: 1px;
display: block;
margin-right: 5px;
margin-left: 25px;
}
.picture1 {
position: relative;
width: 100%;
max-width: 500px;
}
.picture1:hover {
visibility: hidden;
}
.overlay1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.3s ease;
}
.overlay1:hover {
opacity: 1;
}
</style>
</head>
<body>
<table>
<tr>
<th>
KING<br>
<a href="" target="_blank">
<div class="picture1">
<img src="1.jpg" alt="Avatar" width="200" height="auto">
<div class="overlay1">
<img src="5-1.jpg" alt="Avatar" width="200" height="auto">
</div>
</div>
</th>
</tr>
</table>
</body>
</html>
What I have tried:
visibility: hidden;
opacity: 1;
解决方案
Use this code, it will be work..
<!DOCTYPE html> <html > <head> <style type="text/css"> .imgBox { width: 600px; height: 300px; background: url(https://www.newstriger.com/wp-content/uploads/2017/11/What-is-a-corporate-life-Funny-Quotes.jpg) no-repeat; } .imgBox:hover { width: 600px; height: 300px; background: url(https://www.newstriger.com/wp-content/uploads/2017/01/Long-and-healthy-hair-tips-in-hindi.jpg) no-repeat; } </style> </head> <body> <div class="imgBox"> </div> </body> </html>
这篇关于使用hoven可见性：隐藏;眨眼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
