主页 / 问题 / 1381748
Accepted
Daniil
Asked:2022-07-14 12:41:56 +0000 UTC2022-07-14 12:41:56 +0000 UTC

缩放范围在悬停时不起作用

  • 772

有一个带有照片的块，照片被放大，但其中的跨度不是。我什至为跨度设置了相同的类和 id，但它仍然不起作用（<a><img><span></a> --- 这就是结构的样子）。

.column#zoomIn img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.column#zoomIn:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
<div class="flex mt-5">
  <a href="" class="column" id="zoomIn">
    <img src="./img/IMG_5345.JPG" alt="" class="w-56 border-2 border-gray-200"">
    <span id="zoomIn" class="column text-gray-500 bg-white px-4 py-2">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column" id="zoomIn">
    <img src="./img/IMG_5346.JPG" alt="" class="w-56 ml-7 border-2 border-gray-200"">
    <span id="zoomIn" class="column text-gray-500 inline-block ml-7 bg-white px-4 py-2">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column" id="zoomIn">
    <img src="./img/IMG_5347.JPG" alt="" class="w-56 ml-7 border-2 border-gray-200"">
    <span class="text-gray-500 inline-block ml-7">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column" id="zoomIn">
    <img src="./img/IMG_5340.JPG" alt="" class="w-56 ml-7 border-2 border-gray-200"">
    <span class="text-gray-500 inline-block ml-7">В наличии:<span class="text-black"> 10</span></span>
  </a>
</div>

html

2 个回答

  1. Best Answer

    1. 标题中的选择器ID必须具有唯一值（页面上唯一的一个） -更多（htmlbook.ru - Identifiers）

    2. 使用带有HTML语法高亮（和任何语言）的文本编辑器

    <!--  Лишняя кавычка, которая может ломать вёрстку при рендере браузером. ↓ -->
<img src="./img/IMG_5345.JPG" alt="" class="w-56 border-2 border-gray-200"">
    1. 正如@Enokin所说：

    要工作，transform你必须分配display: inline-block;span

    但我要补充一点，除此之外，还需要对两者都添加变形span，并且只挂在第一个span而不接触嵌套的。

    结果：

    .flex {display: flex; flex-direction: column; align-items: center; width: 150px;}
.column {display: block;}
.column img {width: 30px;}

/* То что выше для теста */

.column img,
.column > span {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.column > span {
  display: inline-block;
}

.column:hover img,
.column:hover > span {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
    <div class="flex mt-5">
  <a href="" class="column">
    <img src="//i.imgur.com/aJKHwHo.png" alt="" class="w-56 border-2 border-gray-200">
    <span class="text-gray-500 bg-white px-4 py-2">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column">
    <img src="//i.imgur.com/aJKHwHo.png" alt="" class="w-56 ml-7 border-2 border-gray-200">
    <span class="text-gray-500 inline-block ml-7 bg-white px-4 py-2">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column">
    <img src="//i.imgur.com/aJKHwHo.png" alt="" class="w-56 ml-7 border-2 border-gray-200">
    <span class="text-gray-500 inline-block ml-7">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column">
    <img src="//i.imgur.com/aJKHwHo.png" alt="" class="w-56 ml-7 border-2 border-gray-200">
    <span class="text-gray-500 inline-block ml-7">В наличии:<span class="text-black"> 10</span></span>
  </a>
</div>

    但是有件事告诉我，结果应该还是这样的：

    .flex {display: flex; flex-direction: column; align-items: center; width: 150px;}
.column {display: block;}
.column img {width: 30px;}

/* То что выше для теста */

.column {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.column > span {
  display: inline-block;
}

.column:hover {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
    <div class="flex mt-5">
  <a href="" class="column">
    <img src="//i.imgur.com/aJKHwHo.png" alt="" class="w-56 border-2 border-gray-200">
    <span class="text-gray-500 bg-white px-4 py-2">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column">
    <img src="//i.imgur.com/aJKHwHo.png" alt="" class="w-56 ml-7 border-2 border-gray-200">
    <span class="text-gray-500 inline-block ml-7 bg-white px-4 py-2">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column">
    <img src="//i.imgur.com/aJKHwHo.png" alt="" class="w-56 ml-7 border-2 border-gray-200">
    <span class="text-gray-500 inline-block ml-7">В наличии:<span class="text-black"> 10</span></span>
  </a>
  <a href="" class="column">
    <img src="//i.imgur.com/aJKHwHo.png" alt="" class="w-56 ml-7 border-2 border-gray-200">
    <span class="text-gray-500 inline-block ml-7">В наличии:<span class="text-black"> 10</span></span>
  </a>
</div>

    • 3

  2. 为了使转换起作用，您需要分配display: inline-block; 跨度

    .column#zoomIn img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.column#zoomIn span {
  display: inline-block;
}

.column#zoomIn:hover img,
.column#zoomIn:hover span {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
    <div class="flex mt-5">
  <a href="" class="column" id="zoomIn"><img src="https://see.news/wp-content/uploads/2020/10/Space1.jpg" alt="" class="w-56 border-2 border-gray-200""><span id="zoomIn" class="column text-gray-500 bg-white px-4 py-2">В наличии:<span class="text-black"> 10</span></span></a>

</div>

    • 1

相关问题