我正在嘗試將兩個 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>
合并兩個類 div
holdtom
2023-06-15 17:08:49
