When I hover at submenu items: LUNCH MENU/DINNER MENU, is there a way that the 'MENUS' remain at this style :(background color: #666699, color: white)
I tried to solve it but to no avail. Can anyone give me some idea on how to implement this? I have included the jsfiddle link at the comment.
http://jsfiddle.net/tangjeen/je24e85w/#base
Thanks.
You could use this: http://jsfiddle.net/je24e85w/2/
#menu:hover > * { background-color: #666699; color: white; }
This css will make it so when you hover #menu, it and it's children will get the correct hover styles.
try this:
.nonDropDown li:hover>a {
background: blue;
color: #fff !important;
}
Related
I am trying to make my materialize navbar links not turn the color of the navbar/underline when I hover over them. See the photos for example. I am using react. Any quick fixes?
this is how it should look:
but it looks like this:
Pretty hard to help you without seeing the code. That is not normal behaviour of navbar tabs so something is conflicting. One fix could be to reinforce the hover/active class. This is the actual materializecss styles taken from the docs:
.tabs .tab a:hover, .tabs .tab a.active {
background-color: transparent;
color: #ee6e73;
}
It looks like the browser default anchor tag underline is being applied. So you could try:
.tabs .tab a:hover, .tabs .tab a.active {
text-decoration: none;
color: white;
}
https://materializecss.com/navbar.html/#navbar-tabs
try this just to be sure..it should override whatever conflicting css
.tabs .tab a:hover, .tabs .tab a.active {
text-decoration: none !important;
color: white !important;
}
What's wrong with my :hover below? I dosen't seem to have effect. Tried overflow hidden but it doesn't appear any effect.
.tabs-nav li:hover {
}
demo https://jsfiddle.net/tpd83jxx/
You have to apply the :hover effect in a:hover because you have already applied background-color to a element. Try and add this code.
.tabs-nav a:hover {
background-color: red;
}
Nothing wrong with the css ,Here you applied background for a tag.
So change the hover to a
.tabs-nav li:hover a {
color: white;
background: red;
}
Below code works for me
.tabs-nav li :hover {
color: white;
background: red;
}
If I am not wrong Space is added to apply hover to the child of li. In this case for anchor tag
I'm going over the bootstrap site example http://getbootstrap.com/examples/jumbotron-narrow/#
and when I hover my mouse over the "About" or "Contact" links a grey rounded box appears around the text. When the mouse leaves the element, the grey rounded box disappears.
This is driving me crazy! I have inspected these elements and gone through the styles applied to them and have gone through every single one of them, all the inherited ones, the whole lot. Can someone go through the css and tell me exactly how this is happening? I expected to find some sort of :hover or :focus css but none exists. Furthermore it is not javascript that is changing the background as I have tested the site with javascript enabled.
Please help and I will love you forever.
The code you are looking for:
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #EEE;
}
Super simple, fix:
<link bootstrap />
<link custom /> <-- Overwrite CSS by placing external file after in HTML
Or:
<link bootstrap />
<style></style> <-- Overwrites bootstrap's external CSS
CSS to change is simple:
.nav > li > a:hover, .nav > li > a:focus {
background-color: none;
}
Why does Bootstrap make it so if you hover, it turns grey?
It is because it tells the visitors, that they are on something clickable: a link. And making it more user-friendly and improves a website's UX.
There are an CSS applied when you hovered these elements -
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
Please see highlighted in red -
Demo
html
<ul class="nav">
<li> About
</li>
</ul>
css
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
border-radius: 4px;
text-decoration:none;
width:50px;
text-align:center;
}
.nav {
list-style: none;
}
The buttons background turns grey because of the following css in the bootstrap.min.css file:
nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}
You can run a find on the code mentioned before to find it in the bootstrap.min.css file.
When I copied some necessary codes to jsfiddle it works correctly but it is not working in my website.
My key problem with Tab menus like Our Rooms, Our Gems are not working perfectly when I hover there.
this is the site in which hover is not working correctly
this is working jsfiddle
Edit
I think the main problem is difficult to understand. So I'm giving a hint. Just change #tabs li a with height: 200px; then you'll see the pointer is not hovering over the text but below the text.
I assume that you want a pointer on the entire tab, so you need to modify your class like this on line 1877 in template.css
#tabs li a {
color: #E79D34;
display: block;
font: 20px/50px calibri;
height: 100%;
text-decoration: none;
}
It works in your fiddle because the CSS is NOT normalized, in your website, CSS is normalized.
Demo of not working fiddle
The issue is your h1 tag having class logo, it is overlapping your tabs
Try this
a:hover, #tabs li a:hover {
color: #FFF;
text-decoration: none;
}
In your code there is something that overwrites your :hover. It is either an !important keyword or another definition of :hover after the one you try to fix. Review your code or try using !important in the hovered block.
coz
you have made
a
{text-decoration:none;
}
a:hover
{text-decoration:none;
}
there is no difference in a & a:hover
change something in a:hover
Add this to your style, this will work
#tabs li:hover {
cursor: pointer;
}
you can also do it this way:
#tabs li a,
#tabs li:hover,
#tabs li a:hover {
cursor: pointer;
}
I just put up a sample of my custom theme here: http://fortmovies.com/pestcon/
Does anyone know how to change the navigation color from GRAY to WHITE? I have tried going into every div id and class within navigation and have added the "color:white;" to every one.. I have no idea where it is even causing the gray color... grrr. :)
Using Firebug (an invaluable tool, I highly recommend it), it seems that the offending line is in /pestcon/wp-content/themes/twentyten/style.css on line 398:
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
Change color: #aaa; to color: white.
#wrapper #access a{
color:#fff;
}