www.webdeveloper.com
Results 1 to 6 of 6

Thread: Show a DIV on hover

  1. #1
    Join Date
    Sep 2007
    Posts
    1

    Show a DIV on hover

    Hey everyone,

    I'm trying to build a menu that opens another div when you hover an item. It works in Firefox, but since IE will only allow links to have :hover it will not work. I have some java that lets you trick IE into displaying a list on hover, but I have yet to figure out how to change it to work with a div.

    Help

    Here is a link to the page

    beta.baptistcollege.edu/index.asp

    Thanks in Advance,

    Nathan Z

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    what you basically need is to capture an event which in turn call a function to deal with displaying the content, in this case, for msie/win. that is, you need to register the event onmouseover and onmouseout on each DIV that will act as menu. the function will contain code that work with the css properties as disiplay.

    sorry i can't provide a code because has not been coding for months and now i have to reread some technical things.

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    the simplest way is to duplicate the CSS in div:hover with a custom class, .hover

    then, you can simply change the class to hover upon over, and blank upon "unhover".
    Code:
    <div onmouseover="this.className='hover';"  onmouseout="this.className='';" >
    you could screen out non-ie browsers in a conditional right before the this.className, but the duplicate CSS should appear the same as the proper :hover code anyway...

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    An .htc file is another way of doing it. It's my preferred way because you can leave the HTML alone.

  5. #5
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    The most elegant and cross-browser compatible solution is probably to use a CSS solution, rather than a JavaScript. You can expect more consistent, more responsive, and more reliable results. It's also usually quicker to simply nest DIV's in your links than it is to add two javascript events to each menu item.

    I just posted about this in response to several similar "tool-tip" like questions. As far as I know, the solution(s) were appreciated. Here's one of them: http://www.webdeveloper.com/forum/sh...php?t=191144#3

    Will that accomplish what you need? Would you like a sample page?

  6. #6
    Join Date
    Sep 2011
    Posts
    1

    Help

    Quote Originally Posted by rnd me View Post
    the simplest way is to duplicate the CSS in div:hover with a custom class, .hover

    then, you can simply change the class to hover upon over, and blank upon "unhover".
    Code:
    <div onmouseover="this.className='hover';"  onmouseout="this.className='';" >
    you could screen out non-ie browsers in a conditional right before the this.className, but the duplicate CSS should appear the same as the proper :hover code anyway...
    could u provide me the code for that..

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