locked
Overlapping elements including onmouseover event RRS feed

  • Question

  • User1060443753 posted

    Hi all,

    I have an onmouseover event which switches from a static jpg to an animated gif. In addition an over-lapping text container div identifying the hyperlink target. This combined element serves as the hyperlink to another page.

    The problem I have is the onmouseover event doesn't work through the text container. Imagine the image/gif is a square, the text container starts in the center and extends out to the right. The hovering only triggers around the lower/left/upper parts of the image. I would like it to trigger over the whole image (- or even the whole image & text container if possible!)

    I hope that makes sense. Code below.

    CSS:
            .container {
                ;
            }
    
            /* Bottom right text */
            .text-block {
                ;
                bottom: 30px;
                left: 65px;
                color: darkblue;
                padding-left: 0px;
                padding-right: 0px;
                font-size: 30px;
            }
    
    
    Code:
    <div class="container">
            <a href="Safety.aspx"><img src="Media/logo.jpg" onmouseover="this.src='Media/logoSPIN.gif';" onmouseout="this.src='Media/logo.jpg';"/></a>
            <div class="text-block"> 
            <a href="Safety.aspx"><p>Safety</p></a>
            </div>
          </div>
    

    Monday, April 30, 2018 10:52 AM

Answers

  • User36583972 posted

    Hi friend,

    The problem I have is the onmouseover event doesn't work through the text container. Imagine the image/gif is a square, the text container starts in the center and extends out to the right. The hovering only triggers around the lower/left/upper parts of the image. I would like it to trigger over the whole image (- or even the whole image & text container if possible!)

    You can use the pointer-events: none; to ignore the possible click event of the div element.

      <style>
            .container {
                ;
            }
    
            /* Bottom right text */
            .text-block {
                ;
                bottom: 30px;
                left: 65px;
                color: darkblue;
                padding-left: 0px;
                padding-right: 0px;
                font-size: 30px;
                pointer-events: none;
            }
        </style>
    
       <div class="container">
                <a href="Safety.aspx">
                    <img src="Media/111111.jpg" onmouseover="this.src='Media/111111.gif';" onmouseout="this.src='Media/111111.jpg';" />
    
                </a>
                <div class="text-block">
                    <a href="Safety.aspx">
                        <p>Safety</p>
                    </a>
                </div>
    
            </div>

    Best Regards,

    Yong Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 1, 2018 7:26 AM

All replies

  • User36583972 posted

    Hi friend,

    The problem I have is the onmouseover event doesn't work through the text container. Imagine the image/gif is a square, the text container starts in the center and extends out to the right. The hovering only triggers around the lower/left/upper parts of the image. I would like it to trigger over the whole image (- or even the whole image & text container if possible!)

    You can use the pointer-events: none; to ignore the possible click event of the div element.

      <style>
            .container {
                ;
            }
    
            /* Bottom right text */
            .text-block {
                ;
                bottom: 30px;
                left: 65px;
                color: darkblue;
                padding-left: 0px;
                padding-right: 0px;
                font-size: 30px;
                pointer-events: none;
            }
        </style>
    
       <div class="container">
                <a href="Safety.aspx">
                    <img src="Media/111111.jpg" onmouseover="this.src='Media/111111.gif';" onmouseout="this.src='Media/111111.jpg';" />
    
                </a>
                <div class="text-block">
                    <a href="Safety.aspx">
                        <p>Safety</p>
                    </a>
                </div>
    
            </div>

    Best Regards,

    Yong Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 1, 2018 7:26 AM
  • User1060443753 posted

    Brilliant! and so simple.

    Thank you!

    Tuesday, May 1, 2018 8:35 AM