How to display element when hovering another element and maintain this hover styling when hovering t-CodePudding

I am struggling with the structure of my HTML elements: I hover an image that makes a second image (class=look_block) overlap the main image (class=looks) with the hover animation, buttons (class=quick-add) appear as well; When I hover these buttons all the changes made while hovering the main image revert and the button itself disappears. I attempted to apply the same hover animations to the button that appears to maintain styling but it refuses to communicate with the elements.

This is my website for reference... (the hover animation is placed on each of the images in the image gallery at the bottom of the page)

When hovering the button I expect the changes made when hovering the image to be maintained: when not hovering image, when hovering image, when hovering button.

CSS Styling:

.looks:hover{
  opacity:0 !important;
}
.quick-add:hover   .look_block{
  position:absolute;
}
.quick-add:hover   .look_block{
  display: block !important;
} 
.quick-add:hover{
  opacity:1 !important;
  transition: 0.5s;
  margin-top:-1% !important;
}   
.looks:hover   .quick-add{
  opacity:1 !important;
  transition: 0.5s;
  margin-top:-1% !important;
}  
.looks:hover   .look_block{
  display: block !important;
}

HTML:

<span  style="display:grid;">
<div>
<div ><img alt="Super Cat Bed Warm Sleeping Cat Nest Soft Long Pluh Best Pet Dog Bed For Dogs Basket Cushion Cat Bed Cat Mat Animals Sleeping So" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" style="width: auto; height: auto;" id="look_1"></div>
<div><i >forward</i></div>
<img  src="https://cdn.shopify.com/s/files/1/0645/6842/6713/files/8_banner.png?v=1656016078" alt="" width="17%">
<div  style="opacity: 0; top: 114%; right: 78.8%; position: absolute; width: 16.5% !important;">
<modal-opener data-modal="#QuickAdd-7687876215001">
                <button id="quick-add-template--16036884447449__product-grid7687876215001-submit" type="submit" name="add"  aria-haspopup="dialog" aria-labelledby="quick-add-template--16036884447449__product-grid7687876215001-submit title-template--16036884447449__product-grid-7687876215001" data-product-url="/products/propeller-shower-head">
                  Choose options
                  <div >
                    <svg aria-hidden="true" focusable="false" role="presentation"  viewbox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                      <circle  fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                    </svg>
                  </div>
                </button>
              </modal-opener>
              </div>
</div>

CodePudding user response：

the issue is that the div containing the button is absolutely positioned, when an element is absolutely positioned it can move freely inside the relative parent ( using top bottom right and left ) but the issue here is the parent div is not relatively positioned, so the absolutely child will move towards the next parent with relative positioning, to fix this add position to parent and adjust top left right of the absolute child accordingly

<div style="
    position: relative;
">
<div  style="
    /* position: relative; */
"><img alt="Super Cat Bed Warm Sleeping Cat Nest Soft Long Pluh Best Pet Dog Bed For Dogs Basket Cushion Cat Bed Cat Mat Animals Sleeping So" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" style="width: auto; height: auto;" id="look_1"></div>
<div><i >forward</i></div>
<img  src="https://cdn.shopify.com/s/files/1/0645/6842/6713/files/12_border.png?v=1656026758" alt="" width="17%">
<div  style="opacity: 0;top: 40%;right: 20.8%;position: absolute;/* width: 16.5% !important; */">
<modal-opener data-modal="#QuickAdd-7687876215001">
                <button id="quick-add-template--16036884447449__product-grid7687876215001-submit" type="submit" name="add"  aria-haspopup="dialog" aria-labelledby="quick-add-template--16036884447449__product-grid7687876215001-submit title-template--16036884447449__product-grid-7687876215001" data-product-url="/products/propeller-shower-head">
                  Choose options
                  <div >
                    <svg aria-hidden="true" focusable="false" role="presentation"  viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                      <circle  fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                    </svg>
                  </div>
                </button>
              </modal-opener>
              </div>
</div>

CodePudding user response：

Here the structure is most important:

<div >
          <img src="">
          <button>choose option</button>
          <img src="" >
        </div>

We have kept button in middle of two images. .hovered-img this image we set absolute and first set it's opacity:0. -Now,items class gets :hover we set .hovered-img to opacity:1.

For button, by default we set it's opacity:0; visibility:hidden;, however, when :hover applied to items we set opacity:1; visibility:visible;.
As we set button before .hovered-img we can select it using ~ selctor, which select next sibling irrespective of there type.

.items:hover button:hover~.hovered-img This line says that, hey please apply this styles to hovered-img when items is hovered and button is also hovered.

.main {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.items {
  flex: 1 0 calc(100%/3);
  position: relative;
}

.items img {
  height: 150px;
  width: 100%;
  object-fit: cover;
}

.items .hovered-img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.items button {
  position: absolute;
  bottom: 15px;
  left: 30px;
  right: 30px;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
}

.items:hover .hovered-img {
  opacity: 1
}

.items:hover button {
  opacity: 1;
  visibility: visible;
}

.items:hover button:hover~.hovered-img {
  opacity: 0;
}

<div >
  <div >
    <div >
      <img src="https://source.unsplash.com/random" >
      <button>choose option</button>
      <img src="https://images.unsplash.com/photo-1656068697133-e7c0ef2e861e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1NzkwMDE5MA&ixlib=rb-1.2.1&q=80&w=1080" >
    </div>
    <div >
      <img src="https://source.unsplash.com/random" >
      <button>choose option</button>
      <img src="https://images.unsplash.com/photo-1656068697133-e7c0ef2e861e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1NzkwMDE5MA&ixlib=rb-1.2.1&q=80&w=1080" >
    </div>
    <div >
      <img src="https://source.unsplash.com/random" >
      <button>choose option</button>
      <img src="https://images.unsplash.com/photo-1656068697133-e7c0ef2e861e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1NzkwMDE5MA&ixlib=rb-1.2.1&q=80&w=1080" >
    </div>
    <div >
      <img src="https://source.unsplash.com/random" >
      <button>choose option</button>
      <img src="https://images.unsplash.com/photo-1656068697133-e7c0ef2e861e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1NzkwMDE5MA&ixlib=rb-1.2.1&q=80&w=1080" >
    </div>
    <div >
      <img src="https://source.unsplash.com/random" >
      <button>choose option</button>
      <img src="https://images.unsplash.com/photo-1656068697133-e7c0ef2e861e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1NzkwMDE5MA&ixlib=rb-1.2.1&q=80&w=1080" >
    </div>
    <div >
      <img src="https://source.unsplash.com/random" >
      <button>choose option</button>
      <img src="https://images.unsplash.com/photo-1656068697133-e7c0ef2e861e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1NzkwMDE5MA&ixlib=rb-1.2.1&q=80&w=1080" >
    </div>
  </div>
</div>

CodePudding user response：

Added onm ouseout to my main image (id=image1) and a onm ouseover event to my button (id=add1). Javascript was the solution, the images now correctly overlay eachother, it works perfectly as a permanent solution.

HTML:

<div>
<div ><img alt="Super Cat Bed Warm Sleeping Cat Nest Soft Long Pluh Best Pet Dog Bed For Dogs Basket Cushion Cat Bed Cat Mat Animals Sleeping So" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" style="width: auto; height: auto;" id="look_1"></div>
<div><i >forward</i></div>
<img id="image1" onm ouseout="hovering_done(this)"  src="https://cdn.shopify.com/s/files/1/0645/6842/6713/files/8_banner.png?v=1656016078" alt="" width="17%" style="opacity: 1;">
<div id="add1"  onm ouseover="hovering_current(this)" style="opacity: 0; top: 114%; right: 78.8%; position: absolute; width: 16.5% !important;">
<modal-opener data-modal="#QuickAdd-7687876215001">
                <button id="quick-add-template--16036884447449__product-grid7687876215001-submit" type="submit" name="add"  aria-haspopup="dialog" aria-labelledby="quick-add-template--16036884447449__product-grid7687876215001-submit title-template--16036884447449__product-grid-7687876215001" data-product-url="/products/propeller-shower-head">
                  Choose options
                  <div >
                    <svg aria-hidden="true" focusable="false" role="presentation"  viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                      <circle  fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                    </svg>
                  </div>
                </button>
              </modal-opener>
              </div>
</div>

Javascript:

function hovering_current(ele) {
  document.getElementById("image"   (ele.id.match(/\d/g)).join("")).style.opacity = "0";
}
function hovering_done(ele) {
  ele.style.opacity = "1";
}