如何将hover组元素悬停在另一个元素上？

Question

I have one div .product-wrapper that contains group of elements. And I need to animate them all on hovering on the div container.

the problem is I only get animation when hovering on the main container div .product-wrapper , and whenever I hover any other element included inside the container .product-wrapper all animation get lose.

 .product-wrapper{ width: 270px; height: auto; margin-bottom: 8px; overflow: hidden; position: relative; border: 1px solid #9999; }.product-wrapper>img{ width: 100%; height: 180px; margin: 0 auto; transition: transform.5s; /* Animation */ }.product-wrapper>img:hover{ transform: scale(1.5); }.product-wrapper.title{ background-color: #9999; border-top: 1px solid #fff; border-bottom: 1px solid #fff; color: #fff; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; padding: 8px; text-align: center; z-index: 1; font-size: 20px; transition: .3s ease; }.product-wrapper:hover.title{ opacity: 1; top: 10%; box-shadow:0 0 0 200vmax rgba(0,0,0,.2); }.product-wrapper>a { cursor: pointer; background-color: #9999; color: #fff; padding: 10px; border: 1px solid #fff; opacity: 0; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; transition: .5s ease; z-index: 2; }.product-wrapper:hover a{ opacity: 1; bottom: 5%; }.product-wrapper>div { background-color: #9999; color: #fff; padding: 10px; text-align: center; z-index: 2; position: absolute; bottom: 0; left: 0px; width: 100%; border-top: 1px solid #fff; }.product-wrapper:hover div{ opacity: 0; bottom: 30%; }

 <div class="product-wrapper"> <span class="title">product name</span> <img class="zoomImg" src="https://img.freepik.com/free-vector/hand-drawn-illustration-container-ship-sea_23-2149149324.jpg?w=2000" /> <a asp-controller="News" asp-action="PalNew" asp-route-id="@item.ID" class="ajax">more...</a> <div class="ribbon">product name</div> </div>

Answer 1

The issue with your code was that you weren't telling your code to change when hovered on parent element but rather specifically on the img element itself. Here's what I could do with your question

css:

 .product-wrapper{ width: 270px; height: auto; margin-bottom: 8px; overflow: hidden; position: relative; border: 1px solid #9999; }.product-wrapper>img{ width: 100%; height: 180px; margin: 0 auto; transition: transform.5s; /* Animation */ }.product-wrapper:hover > img{ transform: scale(1.5); }.product-wrapper.title{ background-color: #9999; border-top: 1px solid #fff; border-bottom: 1px solid #fff; color: #fff; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; padding: 8px; text-align: center; z-index: 1; font-size: 20px; transition: .3s ease; }.product-wrapper:hover.title{ opacity: 1; top: 10%; box-shadow:0 0 0 200vmax rgba(0,0,0,.2); }.product-wrapper>a { cursor: pointer; background-color: #9999; color: #fff; padding: 10px; border: 1px solid #fff; opacity: 0; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; transition: .5s ease; z-index: 2; }.product-wrapper:hover a{ opacity: 1; bottom: 5%; }.product-wrapper>div { background-color: #9999; color: #fff; padding: 10px; text-align: center; z-index: 2; position: absolute; bottom: 0; left: 0px; width: 100%; border-top: 1px solid #fff; }.product-wrapper:hover div{ opacity: 0; bottom: 30%; }

 <div class="product-wrapper"> <span class="title">product name</span> <img class="zoomImg" src="https://img.freepik.com/free-vector/hand-drawn-illustration-container-ship-sea_23-2149149324.jpg?w=2000" /> <a asp-controller="News" asp-action="PalNew" asp-route-id="@item.ID" class="ajax">more...</a> <div class="ribbon">product name</div> </div>

not much changed just told the code to transform the child when the parent is hovered. hope this helped.