www.webdeveloper.com
Results 1 to 4 of 4

Thread: onmouseover help

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    2

    onmouseover help



    I have three images next to each other, like at http://www.nikesh.me/demo/image-hover.html. However, when I hover over either the far left or center images, it isn't on top of the one to its right. The part that should be covering the image (to it's right) is underneath it instead.

    The CSS coding is:

    .pistachios a:hover img{
    opacity:0.0;
    }
    .pistachios a:hover{
    background:url('images/123.jpg');
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    z-index:1;
    }

    The HTML coding is:

    <div class="pistachios"><img src="images/123.jpg" alt="" class="border-1" onmouseover="this.src='images/123-large.jpg'"
    onmouseout="this.src='images/123.jpg'"
    /></div>


    Any help would be greatly appreciated!

  2. #2
    Join Date
    Dec 2012
    Location
    California
    Posts
    5
    I'm only a beginner at this, so this is almost just a guess:

    for the HTML coding, could you make it

    Code:
    <div class="pistachios"><img src="images/123.jpg" alt="" class="border-1" onmouseover="this.src='this.style.zIndex=2;images/123-large.jpg'" 
    onmouseout="this.style.zIndex=1;this.src='images/123.jpg'"
    /></div>
    ? Not sure if this is correct syntax, but worth a try I suppose

  3. #3
    Join Date
    Dec 2012
    Posts
    5
    Try mouseenter and mouseleave instead of mouseover and mouseout

  4. #4
    Join Date
    Dec 2012
    Posts
    2
    Great, thank you!

    Do you know how to make the picture not stay on the "onmouseover" on a mobile device?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles