I have a simple menu with a hover state:
<nav id="menu">
<div>Home</div>
<div>
1
<nav>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</nav>
</div>
</nav>
CSS:
#menu > div > nav {
display: none;
position: absolute;
z-index: 9999;
}
#menu > div:hover > nav {
display: block;
}
But the :hover state never ends. After another tap (somewhere else) :hover still stays. Can I get around this without javascript? (Fiddle)
It seems like the only way to get rid of :hover is to :focus somewhere (element.focus()) or hover on something else.
No. Hover states are partially broken on some mobile devices simply because you can't hover over an element. You will have to use javascript.
You can use the hover media query to disable hover states on iOS:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/hover
Related
I'm programming a simple wordpress page and want to change the background color of the menu bar (on the top right) when hovering over it. It's on this website: https://www.happylogo.be/.
I normally just do this with 'add additional css' which just is a css file.
The weird thing is that I beleive my selector code is right because when I add 'visibility:hidden;' It rapidly disappears and reappears again when hovering over the li items.
The css code I use now:
#menu-primary-coach li:hover{
/*#menu-primary-coach is the id of the lu*/
background-color: #c7143a !important;
}
But it doesn't work.
How can I change the background color when hovering over the menu items?
I noticed the <a>tag inside of your <li> is actually overriding the hover state with black.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
You can remove this style or also set the hover state of the <a> to your desired color.
It's caused by this line of CSS. There is a hover on the <a> within the <li>. Since the page is using xhtml the hover style should be on the <a> rather than the <li>. If you use HTML5 it can be on the <li>.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
I have 3 links to other pages, but only no3 shows a color change on hover in Safari.
It works fine in Firefox and others but not Safari.
ul .root-menu li:hover > a {
color:#FFF;
}
<div id="menu">
<ul id="root-menu">
<li>HOME</li>
<li>AREA COVERED</li>
<li>CONTACT</li>
</ul>
</div>
its a bit complicated when cant see real example of your case, but maybe try to set display: inline-block or block for links
ul#root-menu li > a {
display: block; // or inline-block
}
also try to add :hover state styles directly for a, but not for li:
ul#root-menu li > a:hover {
color:#FFF;
}
But again, answer would be more accurate if you will show real examle
I implemented the Lavalamp tab menu in my website: when Mouse goes on absolute Div "#lavalamp" bottom "subs" div not display.How to fixed this, please help me.
Detail code click here
<ul id="nav">
<li><a class="hsubs" href="#">Magento</a>
<div class="subs colbg01">
Submenu 1
</div>
</li>
<li><a class="hsubs" href="#">Wordpress</a>
<div class="subs colbg02">
Submenu 2
</div>
</li>
<li><a class="hsubs" href="#">Mobile App</a>
<div class="subs colbg03">
Submenu 3
</div>
</li>
<div id="lavalamp"></div>
The problem happens when you hover over the triangle, which causes the underlining li to lose its own hover and thus invalidating the active li:nth-child(..) ~ #lavalamp rule.
You can solve this issue with modern browsers by disabling the pointer events on the lavalamp element
#lavalamp{pointer-events:none;}
demo at http://jsfiddle.net/gaby/6Lmgkhxd/4/
Notice: IE added support for pointer-events on v11
The reason this is not working is because the hover state of the li is being broken when hovering over the #lavalamp element (which appears later in the DOM).
If you really want a CSS only fix you can use z-index to place the triangle behind everything else and bring the li forward.
like:
#nav li {
float: left;
display: block;
padding: 16px 20px 18px 20px;
z-index: 1; // <--- added this
}
#lavalamp {
z-index: -1; // add this
... other code
}
example: http://jsfiddle.net/6Lmgkhxd/3/
I changed the li's background-color to transparent to allow this to work.
Also there seems to be a slight gap between the li and the.subs so I increased the bottom padding of the li to overlap better to the 50px top positioned .subs (from 16px to 18px)
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.