html - 悬停缩放行为在 span 标签内的 img 标签上无法正常工作-6ren

html - 悬停缩放行为在 span 标签内的 img 标签上无法正常工作

转载作者：行者123 更新时间：2023-11-28 19:10:25

当我放大顶部图像时，它同时显示底部图像，但当我放大底部图像时，它只显示相同的图像，这是我想要的行为。

如何让上图和下图效果一样？

img {
    width: 3.3125em;
    height: 3.3125em;
    display: block;
    postion: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    cursor: pointer;
    max-width: none;
    margin: 0;
}

img:hover {
    -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    width: 21.875em;
    height: 21.875em;
    margin-top: -9.4375em;
    margin-left: -9.4375em;
}
ul {
    list-style: none;
    padding: 30px 0px 0px 150px;
}

span {
    text-align: right; 
    display:inline-block;
    padding: 10;
    vertical-align: middle;
}

span > span {
    position: relative;
    width: 3.5em;
    height: 3.5em;
    display: inline-block;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h1>Zoom on Hover</h1>

<div>

<ul class="materials">
 <li class="item">
  
    <span><span><img  src="https://images.unsplash.com/photo-1545873692-64145c8c42ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" alt="Safran"></span></span>
<span>Gold</span>
  
 </li>

 <li class="item">
  
    <span><span><img  src="https://previews.123rf.com/images/1stchoice/1stchoice1707/1stchoice170700075/82991692-silver-grey-background-texture-grunge.jpg" alt="Safran"></span></span>
<span>Silver</span>
  
 </li>
</ul>

</div>

</body>
</html>

我希望你能只用html和css来解决这个问题。谢谢。

最佳答案

只需向悬停对象添加一些 z-index 属性。这使得悬停对象通过改变其在 z 轴(“三维”)上的定位而与另一个对象重叠。

请注意，img 的 position 属性中存在错误。固定在下面。

img {
    width: 3.3125em;
    height: 3.3125em;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    cursor: pointer;
    max-width: none;
    margin: 0;
}

img:hover {
    -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    width: 21.875em;
    height: 21.875em;
    margin-top: -9.4375em;
    margin-left: -9.4375em;
    z-index: 1
}
ul {
    list-style: none;
    padding: 30px 0px 0px 150px;
}

span {
    text-align: right; 
    display:inline-block;
    padding: 10;
    vertical-align: middle;
}

span > span {
    position: relative;
    width: 3.5em;
    height: 3.5em;
    display: inline-block;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h1>Zoom on Hover</h1>

<div>

<ul class="materials">
 <li class="item">
  
    <span><span><img  src="https://images.unsplash.com/photo-1545873692-64145c8c42ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" alt="Safran"></span></span>
<span>Gold</span>
  
 </li>

 <li class="item">
  
    <span><span><img  src="https://previews.123rf.com/images/1stchoice/1stchoice1707/1stchoice170700075/82991692-silver-grey-background-texture-grunge.jpg" alt="Safran"></span></span>
<span>Silver</span>
  
 </li>
</ul>

</div>

</body>
</html>