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
Related
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;
}
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 got 4 divs and want to style them like this:
http://jsfiddle.net/AcvbG
HTML:
CSS:
#topleftbox {
background: red;
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: left;
}
#topleftbox:hover {
background: blue;
}
#topleftbox:active {
background: green;
}
#topleftbox:visited {
background: yellow;
}
But replace the colors with background images. The :hover works, but :visited and :actived arent taking effect.
Anyone knows the solution? I got limited knowledge in javascript so i hope there is a way to work around this.
Your :visited and :actived pseudo class wont be visible within jsFiddle since the href="http://test". So, you need to visit the page test to see :visited in action .. AND you need to be on test page to see :active in action.
Here i made a fiddle for you
You can see where .css differs
.topleftbox:hover {
background: blue;
}
.topleftbox:visited {
background: yellow;
}
.topleftbox:visited:hover {
background: pink;
}
.topleftbox:active {
background: green;
}
Also, you should give a check to the ORDER in witch you define your styling.
a:link { color: red } /* unvisited links */
a:visited { color: > blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
An example of combining dynamic pseudo-classes:
a:focus { background: yellow } a:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus
and in pseudo-class :hover.
In modern browsers, CSS can handle what you want without the use of javascript.
http://jsfiddle.net/CWkdY/10/
One thing to notice is that your identifier could benefit from discerning that your ID is a link by adding 'a' in front of your id declaration. Also your initial definition would benefit from 'display:block'. Like this:
a#topleftbox {
background: url('http://d241yswl6yg9sc.cloudfront.net/linen-texture2/top-new.jpg');
width: 229px;
height: 228px;
float: left;
display:block;
}
If you notice your images are initially not showing, try caching all the images you need to use with this little trick. Where you have a div with all the images, off the the side, but hidden.
http://perishablepress.com/css-image-caching/
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>
I have the following HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hover for these menu items to a particular color. So I write:
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.
How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
how about
.main-nav-item:hover
this keeps the specificity low
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
I found if you add a !important, it works when previously it didn't.
a.main-nav-item:link {
color: blue !important;
}
a.main-nav-item:visited {
color: red !important;
}
a.main-nav-item:hover {
color: purple !important;
}
a.main-nav-item:focus {
color: green !important;
}
a.main-nav-item:active {
color: green !important;
}
Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active
One common error is leaving a space before the class names. Even if this was the correct syntax:
.menu a:hover .main-nav-item
it never would have worked.
Therefore, you would not write
.menu a .main-nav-item:hover
it would be
.menu a.main-nav-item:hover