HTML CSS 悬停位置未与容器对齐

Posted 2023-03-05

【中文标题】HTML CSS 悬停位置未与容器对齐

【英文标题】：HTML CSS Hover position not aligning with container

【发布时间】：2019-01-19 20:59:32

【问题描述】：

我目前正在编写我的代码，我尝试制作一个带有悬停效果的响应式图片库。在我创建的第一个代码中，效果很好。但是，它没有响应，因为它始终保持在 4 行中。请看这个Codepen 1

当我尝试使用flexbox 更改style.css 的某些内容时，我能够使其响应并根据窗口大小更改其大小。但是，每当您将鼠标悬停在图像上时，悬停框都不会与容器本身对齐。请看这个Codepen2

代码写在codepen 本身。我在第一个代码到第二个代码中更改的唯一代码是这个（我注释了之前的代码而不是删除它以记住我更改了哪个部分：

.container

    /*width: 1280px;
    margin: 70px auto 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
    margin: .5vw;
    font-size: 0;
    display: -ms-flexbox;
    -ms-flexbox-wrap : wrap;
    -ms-flexbox-direction: column;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    display: -webkit-box;
    display: flex;

.container .box

    /*position: relative;
    width: 300px;
    height: 300px;
    background: #ff0;
    margin: 10px;
    box-sizing: border-box;
    display: inline-block;*/
    -webkit-box-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 300px;
    margin: .5vw;

.container .box .imgBox img

    /*max-width: 100%;*/
    width: 100%;
    height: auto; /*added this*/
    transition: transform 2s;

请帮我弄清楚为什么悬停位置不起作用。谢谢

【参考方案1】：

您可以修改container 的宽度，使其大小由relative positioning 定义，这将解决您的问题。

唯一要做的更改是使用类容器对div 进行更改，如下所示。

.container 
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;

请查看以下示例。

body 
  margin: 0;
  padding: 0;
  background: #262626;
  font-family: sans-serif


.container 
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;


.container .box 
  position: relative;
  width: 300px;
  height: 300px;
  background: #ff0;
  margin: 10px;
  box-sizing: border-box;
  display: inline-block;


.container .box .imgBox 
  position: relative;
  overflow: hidden;


.container .box .imgBox img 
  max-width: 100%;
  transition: transform 2s;


.container .box:hover .imgBox img 
  transform: scale(1.2);


.container .box .details 
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, .8);
  transform: scaleY(0);
  transition: transform .5s;


.container .box:hover .details 
  transform: scaleY(1);


.container .box .details .content 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 15p;
  color: #fff;


.container .box .details .content h1 
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #ff0;


.container .box .details .content p 
  margin: 10px 0 0;
  padding: 0;

<div class="container">
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/1.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Snow Queen Elsa </h1>
        <p>Elsa is the daughter of Agnarr and Iduna, older sister of Anna, and queen of Arendelle. Elsa was born with the powers to manipulate ice and snow and used them to entertain her sister. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/2.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> The Little Mermaid Ariel </h1>
        <p>Ariel as she appears in her mermaid form in Disney's The Little Mermaid. Ariel is a fictional character and the title character of Walt Disney Pictures' 28th animated film The Little Mermaid (1989). She is often rebellious, and in the first film,
          she longs to be a part of the human world. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/3.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Sleeping Beauty Aurora </h1>
        <p>Princess Aurora, also known as Sleeping Beauty or Briar Rose, is a fictional character who appears in Walt Disney Pictures' animated feature film Sleeping Beauty (1959). Originally voiced by singer Mary Costa, Aurora is the only daughter of King
          Stefan and Queen Leah. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/4.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Aladdin's Jasmine </h1>
        <p>Princess Jasmine is the deuteragonist of Disney's 1992 animated feature film, Aladdin. She is from the Middle Eastern kingdom of Agrabah where her father, the Sultan, rules. Jasmine was born into a role and society that treats her as an object
          and a tool, rather than a person </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/5.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Rupunzel </h1>
        <p>Princess Rapunzel (voiced by Mandy Moore) is more assertive in character, and was born a princess. Her long blonde hair has magical healing and restoration powers. A woman named Mother Gothel (voiced by Donna Murphy) kidnaps Rapunzel for her magical
          hair which would help maintain her youth. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/5.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Megara </h1>
        <p>In Greek mythology, Megara was the oldest daughter of Creon, king of Thebes. Megara was offered by her father to Hercules because he defended Thebes. She had two children, a boy and a girl, but was killed with both of them by Hercules in excess
          of madness caused by Hera. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="c">
    </div>
    <div class="details">
      <div class="content">
        <h1> Belle The Beauty </h1>
        <p>Belle is a fictional character who appears in Walt Disney Pictures' animated feature film Beauty and the Beast (1991). Originally voiced by American actress and singer Paige O'Hara, Belle is the non-conforming daughter of an inventor who yearns
          to abandon her predictable village life in return for adventure. </p>
      </div>
    </div>
  </div>
  <div class="box">
    <div class="imgBox">
      <img src="http://www.gstatic.com/webp/gallery/1.jpg">
    </div>
    <div class="details">
      <div class="content">
        <h1> Mulan The Great Warrior Of China </h1>
        <p>Mulan (full name Fa Mulan) is a character, inspired by an actual historic figure, who appears in Walt Disney Pictures' animated feature film Mulan (1998), as well as its sequel Mulan II (2004). </p>
      </div>
    </div>
  </div>
</div>