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;
}
Related
I have read through many questions about styling of jQuery UI autocomplete however I still have a problem that I can not solve. I am creating custom rendering like this:
$('.license-input').autocomplete({
source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
minLength: 2,
delay: 250
}).autocomplete('instance')._renderItem = function( ul, item ) {
return $('<li>')
.append('' + item.name + '')
.appendTo(ul);
};
So my <li> items contain links.
Now I want to style the dropdown and I use the following CSS (I have exaggerated the colors for visibility):
ul.ui-autocomplete li
{
border:none;
background-color:#f505f5;
padding:10px 16px;
font-size:12px;
outline:0;
}
ul.ui-autocomplete li:hover
{
background-color:#05e5e5;
}
ul.ui-autocomplete li a
{
border:none;
background-color: #f505f5;
}
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
}
However, the links does not get styled. What puzzles me the most is what I see when inspecting the result in Chrome's debugger:
You can see that the computed style for the active <a> element is the blue color, however the item itself has white background. What is this white thing that I should style?
I have already tried various selectors like .ui-state-active, .ui-state-hover, ui-state-focus, ul.ui-autocomplete li a:hover and others.
Note: the border: none; rule from the ul.ui-autocomplete li:hover a actually gets applied - without it the style looks different (has 1px black border around the link). So the only problem is the background.
Looks like the link in the list item has a background-image set. This will override any background colors you use.
You can set the background-image: none for that particular link
Something like:
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
background-image: none;
}
Example of link with background image and one without:
https://jsfiddle.net/yuwhuwkz/1/
I would like to change the size and color of my font on a wordpress menu,however when i use the following code
#access ul{
font-size:25px;
color:red;
}
the size changes but color remains the same, how can i edit my code to get the color working as well
You should be able to change non-current menu items with...
#access li a { color: #000; }
and if the current page is the current menu item change the built-in wordpress class...
.current-menu-item a { color:#FFF; }
(1) Something is overriding on the properties you set here in CSS.
(2) Change the color of li instead of ul
(3) Provide your ul structure code also
Try
#access ul{font-size:25px; color:red !important}
Normally, the color property is inherited, but anchor elements does not inherit attributes like color. If you want your <a> tags to inherit the color use:
#access a { color: inherit; }
try this
#access li a {
color: red;
}
or
a{
color:inherit
}
#access li{
color: red;
}
I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule.
Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.
.current_link {
color: #00AD26;
}
#main_nav a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
#main_nav a:hover {
text-decoration: none;
color: #A8EDFF;
}
#main_nav a:active {
text-decoration: none;
color: #00B7FF;
}
a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
a:hover, a:active {
text-decoration: none;
color: #00B7FF;
}
Relative HTML from one of the pages.
<ul id="main_nav" class="grid_5 prefix_9">
<li id="home" class="current_link">Portfolio</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
Your .current_link matches the <li>.
The <a> inside the <li> overrides the color it inherits from its parent element.
You need to apply the color to the <a> itself, either by moving the class or by changing the selector to select <a> elements inside the <li>.
Also, lower rules override earlier ones (if they have the same specificity).
Try this:
.current_link a {
color: #00AD26 !important;
}
You should use:
#main_nav li.current_link a {
color: #00AD26;
}
This will overrule the other selectors and avoids using !important.
Ok so I have the follow menu:
<div class="header">
<div id="logo"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Associated with this CSS class:
.header {
margin:20px 0 55px;
height:68px;
width:inherit;
}
What can I put in my menu tag or my CSS class to make the link not change colors when it is clicked. Currently the link will be blue but once it has been clicked it turns purple. I want it to be say black all the time, clicked or not.
No better way than to quote the specs:
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
a:active { color: gray } /* when element accepts tab focus */
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
So this should cover all cases:
.header a,
.header a:link,
.header a:visited,
.header a:active,
.header a:hover {
color: black;
}
http://jsfiddle.net/ZgUZn/1/
Joerg noted in a comment below the question that I omitted :focus. I did, and for a reason, but I'll note why and you can consider if you need it or not:
.header a:focus {
color: white;
background: blue;
font-size: 2em;
}
http://jsfiddle.net/ZgUZn/5/
Go to that link, click in the white part of the page in the bottom, right quarter, then hit the TAB key. You'll see that when that element receives focus, it changes. You can cover that by including this psuedo-class, but it's my understanding that browsers do not have a default setting for this, so unless you set it somewhere else and you need to cancel it out, it might be unnecessary.
NOTE: I seem to remember in the back of my mind recently I found out that just .header a may also work, but honestly I'm not sure how, and I've always understood the above is how it should be done (belt-and-suspenders notwithstanding). Comments welcome on this point.
EDIT
As to the above note, I think I've got an answer:
a,
a:link,
a:visited,
a:hover,
a:active {
background: green;
color: white;
font-size: 2em;
}
.header a {
color: black;
}
http://jsfiddle.net/ZgUZn/6/
The .header a does not override all of the psuedo-selectors if they have been declared elsewhere. Now, if there aren't any others declared, it appears to work in overriding the browser's defaults, but that may be a false-positive.
That's the default colors assigned by the browser for visited and unvisited links. If you don't want it to change then just style the anchor tags.
.header a {
color: black;
}
I have some HTML markup in my ASP.NET master page representing a basic navigation menu. THree words that link to three pages. My CSS and HTML are included below for your reference.
When I load the page, the links appear with the correct color (red). If I hover over a link, the link changes to the correct color (blue). So far, we're good. Clicking a link changes the link color to the correct color (yellow). The two remaining links are still red / blue as expected. Clicking a second link changes that link to yellow also. Now I have two yellow links. Neither yellow link displays the hover color (blue) like I'd prefer. Clicking the third link causes it to be yellow, too and none of the links display the hover style.
Although a link has been clicked, I'd like the color to be stored and have the hover color displayed. How do I accomplish this? This is an ASP.NET web application project but I'm only using straight HTML at this point.
/* --- css --- */
a:link
{
color: red;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
/* --- HTML --- */
<p class="MenuItems">
Cars.
Trucks.
Vans.
</p>
As described here, the :hover declaration must come AFTER the :visited and :active declarations.
Basically, in the cascade of your current styles, you won't ever see the :hover color.
Your
a:hover
declaration must come after your
a:visited
declaration in the stylesheet because the visited state is currently taking priority. Always put hover at the end of the a styles declaration block to prevent this.
a:link -> a:visited -> a:active -> a:hover is the optimal ordering.
Just use this:
a:hover
{
color: blue ! important;
text-decoration: none ! important;
}
or as described - use this order:
a:link
{
color: red;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}