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;
}
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;
}
I made an application in ExtJS 6, a have made a menu and made the menu items as links. The colors changed to the default link colors, so I wanted to change them to black. I wrote a CSS and it works it loads, in Chrome in the Elements panel in Styles menu it shows that it's the active style. But when I check the Computed menu, it shows me that color is rgb(85, 26, 139). I can even expand it, where it shows me this:
The css which contains the styling is added last, I tried almost everything which comes in my mind.
Something should be with the hyperlinks, because there are some menu items which arent used as links and the styling works on them well.
Any idea what can I do with it?
Thanks in advance!
Edit:
My css style:
.menu-item a:link, .menuItem a:visited, .menuItem a:hover, .menuItem a:active {
color: #222222 !important;
text-decoration: none;
}
Have you tried styling the the .menu-item a to #222222; and
.menu-item a:not([href]) { color:rgb(85,26,139);}
.menu-item a, .menu-item a:link, .menuItem a:visited, .menuItem a:hover, .menuItem a:active {
color: #222222;
text-decoration: none;
}
.menu-item a:not([href]) {
color:rgb(85,26,139);
}
Like this: https://jsfiddle.net/Harvey89/164opbL4/3/
Probably best not to use !important
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.
Please see this JS Bin. I would like to make Project name there as the link. It is shown with underline on hover by default. How can I remove it?
I've tried assigning a class project-name:
a:hover, a:focus .project-name {
text-decoration: none;
}
But it affects other links also.
There is a difference between this: a:focus .project-name and this: a.project-name:focus.
The first selects descendant elements of a focused a that have a class of project-name. The second selects an a that has a class of project-name and is focused.
All that to say, you need to do this:
a.project-name:hover, a.project-name:focus {
text-decoration: none;
}
Try this:
a.project-name:hover, a.project-name:focus {
text-decoration: none !important;
}
a.project-name:hover, a.project-name:focus{
text-decoration: none;
}
I have taken the links dynamically which are coming in a list. When i click on the link, in other container its page opens. I want to change the visited link color.Basically the block background color. I am able to change color on click. but i need it will stay as it is until n unless i refresh the page. I used
ul
{
list-style-type: none;
margin:0;
padding:0;
text-decoration:none;
display: block;
}
a {
text-decoration: none;
display: block;
}
ul li{
padding-bottom: 10px;
text-decoration: none;
}
li:hover {
background-color:#7EA5E4;
}
li a:visited, a:active{
background-color: #09F;
}
Please suggest me where i have to do changes.
That is, what :visited does. But you "block" is the list item, which can't be visited, because it isn't a link. Style you anchor as block by moving the appropriate styles from the list item to the anchor. That way you also could style the background.
You could try something like, changing the colour / font family to suite you
.Link A:visited {
text-decoration: none;
font-family: arial,sans-serif ;
color: #fff;
}
The .link is a custom class
Hope this can help,
Thanks,
Jack.
i hope you are looking like this:- http://tinkerbin.com/VsbhpxGi
you just have to make .active class and define in li
like this :-
li.active {
background-color:#7EA5E4;
}
UPDATED ANSWER
i hope you are looking like this if you will click on any link so that link will be active...... see the updated answer...
http://tinkerbin.com/Fm0lRO8Z