www.webdeveloper.com
Results 1 to 6 of 6

Thread: content change on hover, set a default display?

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    content change on hover, set a default display?

    I made some display content changes on hover (text and a rollover image) However, I need one of the links to be displaying by default when the page comes up otherwise nothing is there. (It is product logos with product info that displays below) The trick is though, I need the default display to go away when another one of the links are hovered over as that content then takes the place of the other content. Make sense?

    Is there anyway to accomplish this using CSS? It looks and works great and I would like to not use Javascript if at all possible.
    Thanks so much!!

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    256

    simple JavaScript

    See for examples http://oksenhendler.webs.com/generic...leCutPlus.html

    Insert image. Name image (e.g. holder), then use JavaScript onmouse over or onclick to change source of large image

  3. #3
    Join Date
    Apr 2012
    Posts
    3
    I already have the hover (mouse over) changing just using CSS. Is there anyway not to use Javascript to get a default image to stay up? It is very similar to this http://meyerweb.com/eric/css/edge/popups/demo.html but I just need at least one of the items to stay "on" as if they are hovered so some content is displayed.
    Thanks for the suggestion!

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    256

    hover <SPAN>

    Ah, Eric Meyers hover <SPAN>. I used that at http://www.chanit.com/gallery/floral.htm.

    It's hard to visualize your page without "full disclosure" (CSS, HTML code). I don't think you can use the hover <SPAN> the way you suggest because the trick with that is to change content of <SPAN>'s display from none to block (or visibility from hidden to visible). But I'm trying to visualize some way to assign background image to different anchor pseudo states (a, a:link, a:visited, a:focus, a:hover, a:active) that would change.

    Anyone else have any ideas?

  5. #5
    Join Date
    Sep 2006
    Location
    new york
    Posts
    256

    z-index ?

    Since the Eric Meyers example uses position: absolute and Z-INDEX, could you do something with position:relative (tying the span to the relative element) of specific area with a lesser Z-INDEX ?

    Code:
    div#links a:hover span {display: block;
       position: absolute; top: 200px; left: 0; width: 125px;
       padding: 5px; margin: 10px; z-index: 100;
       color: #AAA; background: black;
       font: 10px Verdana, sans-serif; text-align: center;}
    At http://www.auntnini.com the pop-up <SPAN>s were tied to links
    Code:
    <li class="button" id="sketch">
    	<a href="sketch/index.htm">Sketch<span>life drawings</span></a>	</li>
    
    	<li class="button" id="flash">
    	<a href="vectorFlash/index.html">Vector&nbsp;/&nbsp;Flash<span> in the works</span></a>	</li>
    	<li class="button" id="new">
    	<a href="new/index.htm">New&nbsp;Stuff<span>digital art stuff</span></a>	</li>

  6. #6
    Join Date
    Apr 2012
    Posts
    3
    I used another span to change the rollover image using position and z-index as you mentioned. It works beautifully. So basically there is always a hover state active on one item, then when you rollover another item, the span image covers up (z-index and positioning) what would be the active hover state with the span image. It seem very simple once you figure it out, I think I was trying to make it harder than it was. thanks for your help!

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