Just putting together this site and would like the menu item with a dropdown to stay highlighted in white when you are hovering over the dropdown menu items.
http://dl.dropbox.com/u/7086475/Paul%20Day/index.html
Instead of using the #nav a:hover selector you can use #nav li:hover instead.
The li will remain in the hover state while you're in the submenu unlike the anchor.
It won't work in IE6 since the hover pseudo class only works on anchors.
#nav li:hover{
color: #fff;
}
Use this jquery, it will work to solve your problem
$(function() {
$('#nav li ul').hover(function() {
$(this).prev('#nav li a').css('color', '#FF6600');
}, function() {
$(this).prev('#nav li a').css('color', '#fff');
});
});
You can set a css class for the hover state of parent li using jquery or javascript.
Edit
You can set a css class like this...
$(document).ready(function() {
$("#nav li li").mouseenter(function() {
$(this).parent().parent().addClass("test");
});
$("#nav li li").mouseleave(function() {
$(this).parent().parent().removeClass("test");
});
});
and Css Style...
.test { font-weight:bold; color:#fff; }
Related
I have one issue with Safari. My page displays a video player with some controls that are made visible (visibility: visible) when the mouse move over the player.
This "effect" is achieved with a simple CSS rule that fails under Safari.
<div class="player">
<!-- ... -->
<ol class="player-controls">
<li>Prev.</li>
</ol>
</div>
.player-controls li {
visibility: hidden;
}
.player:hover .player-controls li,
.player .player-controls:hover li,
.player .player-controls li:hover,
.player:fullscreen .player-controls li {
visibility: visible;
}
I have a codepen with the full version: https://codepen.io/gervaisb/pen/WNQbvXE
I have the same issue with the :fullscreen pseudo class that I use to display one button in fullscreen only.
How can I change the visibility of some childs when the parent is :hover (or :fullscreen) within Safari ?
Thanks
I was not able to find a solution.
So I decided to use JavaScript to solve my issue. onmouseover and onmouseout are used to toggle the visibility.
Later I found that Safari does not play well with selector groups (having many selectors separated by a comma). And I had to duplicate my style to keep the hover effect on Css for other browsers and another identical style under a class for Safari.
/* This does not work
.controls button:hover,
.controls button.is-hover */
.controls button:hover {
background-color: white;
color: blue;
}
.controls button.is-hover {
background-color: white;
color: blue;
}
var controls = document.querySelectorAll('.video-controls li');
var showControls = function() {
controls.forEach(function(control){
control.style.visibility = 'visible';
});
};
var hideControls = function() {
controls.forEach(function(control){
control.style.visibility = 'hidden';
});
};
document.querySelectorAll('.container, .controls, .controls li, .controls button').forEach(function(el){
el.onmouseover = showControls;
el.onmouseout = hideControls;
});
This solved all the similar issues with pseudo classes like :hover and :fullscreen.
Note that hideControls and showControls should be mergeable via one bounded function; el.onmouseover = setVisibility.bind('visible'). But I did not tried.
I have a piece of code I've written, which I have placed above a section of minified CSS:
.scroll-fixed-navbar {
background-color: black !important;
}
.banner-list li i {
color: #f86900 !important;
}
.btn-primary {
background-color: #f86900 !important;
}
#nav li a {
color: #f1861d !important;
}
#nav li:hover {
color: #a8a89b !important;
}
[Huge chuck of minified code containing Font Awesome and Twitter Bootstrap]
On one server this works as expected, and the link items fade to grey on hover. On another server, however, the on hover effect does not trigger. I've tried opening the li elements in the inspector, but even on the server where the effect is working, the CSS doesn't appear to show up:
I saw somewhere that the :hover pseudo-class should only be applied to the a element, but I looked at the W3C wiki, and there is no mention of this there. Can I apply :hover to the li parent of an anchor in this way, or is it illegal code? Might the Bootstrap and/or Font Awesome code be overriding the CSS? Or is the problem likely to be caused by something else?
I think this:
#nav li a {
color: #f1861d !important;
}
is overriding this:
#nav li:hover {
color: #a8a89b !important;
}
Why do you set the :hover on the li? Try targeting the a element after the li:hover:
#nav li:hover a {
color: inherit !important;
}
I have menu which the active item has an active class on load, which changes its background.
The hover of other items change the background of hovered item.
<ul>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<style>
li:hover, li.active {background:black}
</style>
Is there any way to remove active class background on other items hover in pure CSS. something like:
li.hover .active {background:none}
This works if active is under li, but doesn't work here.
This isn't reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first li can affect the current li.active element with the following CSS:
li:hover ~ li.active {
background-color: #f00; /* or whatever */
}
JS Fiddle demo.
But hovering over the third li cannot affect the same li.active element.
However, the following would work:
ul:hover li.active {
background-color: transparent;
}
JS Fiddle demo.
Try this:
ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:
A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any lis
This worked for me :
.dvchange1 {
color:#fff;
}
.dvOne:hover .dvchange2 {
color:#000;
}
<div class="dvchange1 dvchange2">
<span class="">
Hello
<span>
</div>
Check out www.sadrobotdevelopment.com for example of what I am talking about (best viewed in chrome)
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
This is the CSS that makes the menu flyout, what I want to figure out how to do is make it clickable as well. Mostly due to the fact that tablets and smartphones don't have hover. Is there something in CSS that can handle this, or do I need to look into getting my site optimized for mobile browsing?
If there is a link before child UL, you could use :focus and :active pseudoclasses for link in conjunction with adjacent-sibling combinator:
#menu LI > A:focus + UL,
#menu LI > A:active + UL {
opacity: 1;
/*...*/
}
There's no way to achieve click events with pure CSS. You can hook up a javascript click handler to add an "active" class to your element and have the CSS use that in addition.
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...