如何在将鼠标悬停在网格上时停止缩小,并阻止整个网格发生变化?
只需简单地悬停网格即可产生这种效果,我尝试将高度和宽度设为 100%。
我无法弄清楚发生了什么以及问题的来源,悬停在 div 上而不是图像上。我可以理解悬停在图像上是否不起作用,因为图像被拉伸以适合 div。
代码笔:https://codepen.io/Centaur26/pen/BaWKeEm
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
width: 100%;
}
.block {
height: 100%;
}
.block h1 {
display: flex;
height: 10%;
text-align: center;
/* border:1px solid red; */
flex-direction: column;
align-content: center;
padding-top: 10px;
background: grey;
}
.container {
display: grid;
height: 90%;
width: 100%;
/* background: black; */
grid-template-areas:
"pic1 pic2 pic2 pic3 pic3"
"pic1 pic4 pic5 pic3 pic3"
"pic6 pic4 pic5 pic7 pic8"
"pic6 pic9 pic10 pic7 pic8";
gap: 2px;
}
.container > div {
border: 1px solid black;
}
.pic1 {
grid-area: pic1;
background-image: url(chess/Polgar.jpg);
position: relative;
background-size: cover;
background-size: 100% 100%;
}
.pic2 {
grid-area: pic2;
background-image: url(chess/chess2.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.pic3 {
grid-area: pic3;
background-image: url(chess/tal1.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pic4 {
grid-area: pic4;
background-image: url(chess/kasparov.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pic5 {
grid-area: pic5;
background-image: url(chess/gary.png);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pic6 {
grid-area: pic6;
background-image: url(chess/carlson.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pic7 {
grid-area: pic7;
background-image: url(chess/ding.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pic8 {
grid-area: pic8;
background-image: url(chess/girl.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pic9 {
grid-area: pic9;
background-image: url(chess/hand.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pic10 {
grid-area: pic10;
background-image: url(chess/chess123.jpg);
background-size: contain;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* .pic1:hover{
padding: 10px;
position: absolute;
left:0;
bottom:0;
color:white;
width:100%;
opacity: .1;
border: 1px solid red;
} */
.pic2:hover p {
font-size: 17px;
opacity: 0.7;
color: white;
font-weight: bolder;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid red;
width: 100%;
height: 100%;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
text-align: center;
}
.pic1:hover p {
font-size: 17px;
opacity: 0.7;
color: white;
font-weight: bolder;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid red;
width: 100%;
height: 100%;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess</title>
<link rel="stylesheet" href="chess.css">
</head>
<body>
<div class="block">
<h1>Chess Images</h1>
<div class="container">
<div class="pic1">
<p>Judith Polgar</p>
</div>
<div class="pic2">
<p>Chess Board</p>
</div>
<div class="pic3"></div>
<div class="pic4"></div>
<div class="pic5"></div>
<div class="pic6"></div>
<div class="pic7"></div>
<div class="pic8"></div>
<div class="pic9"></div>
<div class="pic10"></div>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
我猜它正在缩小,因为它没有为每列和每行指定特定的宽度和高度,因此它正在缩小以适应内容。不是 100% 肯定,但将以下内容添加到 .container
修复了它
grid-template-columns: repeat(5, 20%);
grid-template-rows: repeat(4, 25%);
答案 1 :(得分:0)
我可以看到您在悬停时更改了 p
标签的样式,而不是 div
标签。我认为收缩是由 position
引起的。
你可以试试这个解决方案
.pic1:hover {
font-size: 17px;
opacity: .7;
color: white;
font-weight: bolder;
border-color: red;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
在这里,我将 hover
应用于 div
并删除了 position
和 border
属性。
但是,由于 div
的变化,它会在悬停时导致 font-size
变大。您可以将 min-width
设置为尽可能大的 div
,例如
.pic1 {
grid-area: pic1;
background-image: url(chess/Polgar.jpg);
position: relative;
background-size: cover;
background-size: 100% 100%;
min-width: 290px;
}