I hav a nav menu which has a white text and blue background and on hover its blue text with black background where as on selected its white text with black background. But if I hover on selected menu item it shows me blue text (properties of :hover) which I don't want to happen. Any way I can stop it?
Fiddle : link
Just add the .selected:hover case as well
main_menu li .selected,
main_menu li .selected:hover{
Demo at http://jsfiddle.net/WTeYW/3/
Additionally, since your .selected and :hover rules are identical except for the color you should merge them and create new rules just for the differences (better maintainability)
.main_menu li a:hover,
.main_menu li a.selected{
box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
border-color:#888;
background:#000;
}
.main_menu li a:hover{color:#6cf;}
.main_menu li a.selected,
.main_menu li a.selected:hover{color:#ffffff;}
Demo including this at http://jsfiddle.net/WTeYW/5/
(notice : if you read the original answer it was a bit wrong. the a.selected is not more specific, it is equally specific but prevailed because it was the last in the CSS file. The above correction is the way to do it.)
I used CSS :not(.selected) to prevent :hover being executed.
.main_menu li a:not(.selected):hover{
Here: http://jsfiddle.net/CfeCB/
This is what you mean right?
You can use css :not() selector for this :
.main_menu li a:hover:not(.selected){
box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
border-color:#888;
background:#000;
color:#6cf;
}
Try This
Refrence 1
Related
http://www.grandeformato.com/new/
under the slider I have a section called product-section with clickable divs.
the css of the "hover" of that div is:
.product-section ul li:hover
{
box-shadow: 0px 0px 6px 0px #ccc;
}
.product-section ul li a h4:hover
{
color: #FF601A;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
}
and as you can see the link becomes orange (FF601A) only when the pointer is over it. Is it possible for it becoming orange also when the pointer is over the whole div?
Sure thing!
You can use the :hover sector on a parent to change the child's properties.
.product-section ul li:hover a h4 {
color: #FF601A;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
}
It depends on where you add the :hover in your code. At the moment you have it do when the li or the h4 are are hovered, something changes (the color or the box-shadow).
If you move the :hover to another part of the code (e.g., .product-selection:hover ul li a h4) then when that element is hovered, the appropriate child element will change state.
I've done a pen which has a div, a ul, and 2 li's,each with a link. When you :hover the div, both li's have a box-shadow and the link .product changes color.
I am trying to highlight the active <a> however, my CSS is being overwritten.
#portfolio-filter li a {
color: black;
text-decoration: none;
padding:3px 8px 3px 8px;
background:#8d8d8d;
}
#portfolio-filter li:hover, a.filter.active {
background: white;
}
<ul id="portfolio-filter">
<li>
All
</li>
<li> etc... </li>
</ul>
The #portfolio-filter li a style is overwritting the #portfolio-filter li:hover, a.filter.active style and not sure what I need to do to fix this.
Link: http://velnikolic.com/ramova3/?page_id=25
The problem is that #portfolio-filter li a is more specific than a.filter.active. Since the background is on that a element, not the li element, your a background won't change even if #portfolio-filter li:hover is more specific.
To fix it, use something like #portfolio-filter li a.filter.active, which is more specific and will correctly take precedence.
As a general rule of thumb, when working with active classes, always use a similar selector as the original (non-active) definition. Otherwise, you may run into specificity issues like this one.
Here's a useful specificity calculator when in doubt.
The comma makes your "second" style two separate styles, remove the command and you should be fine.
ref: http://webdesign.about.com/od/cssselectors/f/comma-in-css-selectors.htm
Here was my solution.
portfolio-filter li a:hover, #portfolio-filter > li a.active{ background: white; }
First of all i would like to add that its been a while, about 3 years, since i've developed a dropdown menu in CSS. I have this drop down menu, but i have the following issue. apparently i cannot override properties of li/a elements of my submenu.
I would like to make the font color of submenu's li's a elements same as color of menu's ul's li's a elements, which is light grey ( rgb(206,206,204) )
Could somebody please take a look and point me at what i am doing wrong? Here's a link to a source code archive with html, css and background images:
http://www.filedropper.com/001_17
Your problem is in this rule:
div ul.menu li:hover a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
With that rule all <a>'s in that <li> turn white. What you need to do is have only the direct children turn white:
div ul.menu li:hover > a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
JSFiddle Demo
http://jsfiddle.net/R5G56/
I am trying to create a navbar that has the inset effect with borders and outlines, and I want the first and last nav item to have the same inset border on their outside too. I can get the effect with the first nav item because the outline is the same color as the borders, but when the outline is applied to the last nav item, it looks ridiculous because it changes everything around it too.
Any idea if I can achieve this?
Here is the CSS for the first and last item, the rest of the CSS can be found in the jsfiddle:
.navigation li:first-child a {
outline:1px solid #000;
}
.navigation li:last-child a {
outline:1px solid #383838;
}
A simple solution is to apply the extra borders to the li tags instead of the a tags. So the new CSS would read as below. Live example: http://jsfiddle.net/R5G56/6/
.navigation li:first-child{
border-left:1px solid #000;
}
.navigation li:last-child {
border-right:1px solid #383838;
}
The a tags have been removed from the selector and outline has been switched out for border-left and border-right.
http://jsfiddle.net/R5G56/5/
Is that what you are looking want to happen? I think you are double outlining the last child
otherwise.
.navigation li:last-child a {
border-right:1px solid #383838;
}
Could you use a box-shadow to trick border. You can asign multiple in one statement
I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/