合并两个类 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 {&nbsp; /* Start the shake animation and make the animation last for 0.5 seconds */&nbsp; animation: shake 0.5s;&nbsp; /* When the animation is finished, start again */&nbsp; animation-iteration-count: infinite;}@keyframes shake {&nbsp; 0% { transform: translate(1px, 1px) rotate(0deg); }&nbsp; 10% { transform: translate(-1px, -2px) rotate(-1deg); }&nbsp; 20% { transform: translate(-3px, 0px) rotate(1deg); }&nbsp; 30% { transform: translate(3px, 2px) rotate(0deg); }&nbsp; 40% { transform: translate(1px, -1px) rotate(1deg); }&nbsp; 50% { transform: translate(-1px, 2px) rotate(-1deg); }&nbsp; 60% { transform: translate(-3px, 1px) rotate(0deg); }&nbsp; 70% { transform: translate(3px, 1px) rotate(-1deg); }&nbsp; 80% { transform: translate(-1px, -1px) rotate(1deg); }&nbsp; 90% { transform: translate(1px, 2px) rotate(0deg); }&nbsp; 100% { transform: translate(1px, -2px) rotate(-1deg); }}.container {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; max-width: 400px;}.image {&nbsp; display: block;&nbsp; width: 100%;&nbsp; height: auto;}.overlay {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; opacity: 0;&nbsp; transition: .3s ease;&nbsp; background-color: red;}.container:hover .overlay {&nbsp; opacity: 1;}.icon {&nbsp; color: white;&nbsp; font-size: 100px;&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; transform: translate(-50%, -50%);&nbsp; -ms-transform: translate(-50%, -50%);&nbsp; text-align: center;}.fa-user:hover {&nbsp; 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">&nbsp; <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">&nbsp; <div class="overlay">&nbsp; &nbsp; <a href="#" class="icon" title="User Profile">&nbsp; &nbsp; &nbsp; <i class="fa fa-user"></i>&nbsp; &nbsp; </a>&nbsp; </div></div>