合并两个类 div

Question

我正在尝试将两个 div 类组合在一起，这样它就可以工作了。我正在尝试将这些东西组合在一起，但我不能。我该怎么做？唯一有效的是摇动图像，我希望两者一起工作。我现在将链接一的 .overlay 放入自动风格3。CSS代码是img:hover {  animation: shake 0.2s;  animation-iteration-count: infinite;}@keyframes shake {  0% { transform: translate(1px, 1px) rotate(0deg); }  10% { transform: translate(-1px, -2px) rotate(-1deg); }  20% { transform: translate(-3px, 0px) rotate(1deg); }  30% { transform: translate(3px, 2px) rotate(0deg); }  40% { transform: translate(1px, -1px) rotate(1deg); }  50% { transform: translate(-1px, 2px) rotate(-1deg); }  60% { transform: translate(-3px, 1px) rotate(0deg); }  70% { transform: translate(3px, 1px) rotate(-1deg); }  80% { transform: translate(-1px, -1px) rotate(1deg); }  90% { transform: translate(1px, 2px) rotate(0deg); }  100% { transform: translate(1px, -2px) rotate(-1deg); }}.auto-style3 {    margin-top: 0px;     position: absolute;   bottom: 0;   background: rgb(0, 0, 0);  background: rgba(0, 0, 0, 0.5); /* Black see-through */  color: #f1f1f1;   width: 100%;  transition: .5s ease;  opacity:0;  color: white;  font-size: 20px;  padding: 20px;  text-align: center;}.auto-style4 {    background-color: #FF0000;}* {box-sizing: border-box;}.container {  position: relative;  width: 50%;  max-width: 300px;}.image {  display: block;  width: 100%;  height: auto;}.container:hover .overlay {  opacity: 1;}我的代码是 <div class="container"  >      <img src="avatar.jpg" alt="Avatar" width="278" height="262" class="style3" >  <div class="auto-style3">  Avatar is ON  </div>  </div>

Answer 1

我从两个来源直接复制/粘贴，然后更改了下面代码片段中的第一行 CSS ( img:hover-> .container:hover)

.container:hover {

  /* Start the shake animation and make the animation last for 0.5 seconds */

  animation: shake 0.5s;

  /* When the animation is finished, start again */

  animation-iteration-count: infinite;

}

@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

}

.container {

  position: relative;

  width: 100%;

  max-width: 400px;

}

.image {

  display: block;

  width: 100%;

  height: auto;

}

.overlay {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 100%;

  width: 100%;

  opacity: 0;

  transition: .3s ease;

  background-color: red;

}

.container:hover .overlay {

  opacity: 1;

}

.icon {

  color: white;

  font-size: 100px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  text-align: center;

}

.fa-user:hover {

  color: #eee;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">

  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">

  <div class="overlay">

    <a href="#" class="icon" title="User Profile">

      <i class="fa fa-user"></i>

    </a>

  </div>

</div>