skip to Main Content

I have a link in text on this page, https://melodylakerart.com/product/sun-on-skin-mask-duplicate-1/ which when hovered over produces a pop up image.

As you can see, the text is broken – all the text between "sensitive’ and ‘off" should be on one line (including the link)

How do I get rid of the weird line breaks?

CSS is:

.hover_img a {
  position: relative;
}

.hover_img a span {
  position: absolute;
  display: none;
  z-index: 99;
}

.hover_img a:hover span {
  display: block;
}

.hover_img a:hover span {
  display: block;
  width: 350px;
}

HTML is:

Sensitive ears? Add an 
<div class="hover_img"> 
   <a href="#">adjustable silicone strap
       <span>
           <img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
       </span>
   </a>
<div>
to take the pressure off

2

Answers


  1. you have some problemes with the HTML tags organisation

    try to replace the the full <div class="hover_img"> with this code

    <div class="hover_img">
        <p>
            <span>Sensitive ears? Add an </span>
            <a href="#">adjustable silicone strap
                <span>
                    <img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
                </span>
            </a>
            <span>to take the pressure off</span>
        </p>
        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-22252-0-0">
            <label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-22252-0[]"
                    data-raw-price="1.50" data-price="1.5" data-price-type="quantity_based"
                    value="face-mask-strap-extension-loop-ear-protector"
                    data-label="Face Mask Strap Extension Loop Ear Protector"> Face Mask Strap Extension Loop Ear Protector
                (+<span class="woocommerce-Price-amount amount"><span
                        class="woocommerce-Price-currencySymbol">£</span>1.50</span>)</label>
        </p>
        <div class="clear"></div>
    </div>
    
    Login or Signup to reply.
  2. The addon is doing something strange with the internal div. It wraps the content in a p tag and pushes the div outside. Best to remove it as not needed and move the class name to the a tag (except)….. Change the a to a span because then you wont have the clickable behaviour.

    Change the html to:

    Sensitive ears? Add an <span class="hover_img">adjustable silicone ear protector strap <span><img src="https://melodylakerart.com/wp-content/uploads/2020/06/Mask-extenders-2.jpg" alt="image" height="100"></span></span>to take the pressure off.
    

    Modify the Css:

    span.hover_img { position:relative; color:#f66f61; }
    span.hover_img span { position:absolute; display:none; z-index:99; }
    span.hover_img:hover span {display: block;width: 350px;}
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search