Jump to content

Search the Community

Showing results for tags ':hover'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 2 results

  1. I have a problem with my website. I'm trying to build a navigation bar that has another one underneath it and that appears after you hover a top level menu item: XHTML 1.0 <div id="navContainer"><div id="navigation"> <ul id="nav"> <li id="item1"><a href="#">Item 1</a></li> <li id="item2"><a href="#">Item 2</a> <ul id="submenu 1"> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> <li><a href="#">Sub Item 2.3</a></li> </ul> </li> <li id="item3"><a href="#">Item 3</a> <ul> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> </ul> </li> <li id="item4"><a href="#">Item 4</a></li> </ul> </div></div> CSS 3 /* ---------- 6. CSS 3 Menu ---------- */#navigation {width: 738px;height: 40px;clear: both;background: #5d801a;-moz-border-radius: 10px;-webkit-border-radius: 10px;}/* STYLING THE FIRST-LEVEL MENU */ul#nav {float: left;width: 438px;margin: 0 150px;list-style: none;}ul#nav li {display: inline;}/* STYLING THE LINKS IN THE TOP-LEVEL MENU */ul#nav li a {float: left;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 40px;color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #880000;margin: 0 0 10px 0;padding: 0 30px;background: #5d801a padding-box;-moz-border-radius-topright: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-webkit-border-top-left-radius: 10px;}/* APPLIES THE ACTIVE STATE FOR THE LINKS IN THE TOP-LEVEL MENU */ul#nav li:hover > a {color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #330000;background: #6f1747 padding-box;;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin: 0 0 10px 0;}/* THE SUBMENU LIST HIDDEN BY DEFAULT */ul#nav ul {display: none;}/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */ul#nav li:hover > ul {position: absolute;display: block;width: 360px;height: 30px;margin: 46px 79px;background: #6f1747;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-border-radius: 20px/40px;-webkit-border-radius: 20px/40px;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}/* STYLING THE LINKS IN THE SUBMENU */ul#nav li:hover > ul li a {float: left;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 30px;color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #110000;margin: 0 5px;padding: 0 20px;background: #6f1747;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}ul#nav li:hover > ul li a:hover {color: #120000;text-decoration: none;text-shadow: none;}ul#nav li:hover > ul#submenu1{position: absolute;display: block;margin: 46px 0; <----padding: 0;margin-left: -24px;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}/* ---------- 7. CSS 3 Menu's Animation ---------- */@-moz-keyframes cssMenu {0% {background: #cccccc content-box; color: #ffffff;}100% {background: #6f1747 content-box; text-shadow: 1px 1px 1px #110000; }}@-webkit-keyframes cssMenu {0% {background: #cccccc content-box; color: #ffffff;}100% {background: #6f1747 content-box; text-shadow: 1px 1px 1px #110000;}} The issue is this: Is there a way to control the timing of the :hover property?(CSS only or Javascript if it isn't possible with CSS) Because I want the submenu to be 6px under the top level menu (as you noticed from the 46px margin rule) but in the second I leave the parent item (so I stop hovering it) the submenu will instantly disappear without giving the time to the user to click on the submenu items.And if there isn't a way to control the :hover property, what's the best way to achieve the effect? Thank you all
  2. I have an image that kind of serves as an opaque background, and once hovered the opaqueness goes away. Also, I have a row of list items to serve as a menu, and once hovered the color of the text darkens to become more visible. This works great. As long as the mouse is directly over each element. The text element is directly over the background. What I want though is to have the background stay apparent as the text is hovered over, instead of the background becoming opaque again if I hover directly over the text. Can this be done without Javascript? Or is there a way with CSS3 to have the element that's being hovered over and another element change while interacting with only the list/menu elements? I would prefer a CSS solution if possible. Thank you in advance! Or even to put CSS inside Javascript? like have an if then statement for the text that says if there is a rollover event on the text/tables then it initiates the CSS :hover for the background?I want to use CSS rather than Javascript as much as possible because 1) I understand CSS and not JS, and 2) JS is ugly. Thanks again!!
×
×
  • Create New...