hei everyone :) so i'm making this menu and everything works perfectly until i make a new site for when you click on the links. then the links get active and when i then hover over the link. and it's supposed to get the background color and text color it get's when you hovering. it doesn't seem to work.
the background color still get's the same, but the text color just remain black instead of changing. and if i change the color on the text when you make it active, then the text will remain that color even if i'm not hovering. and it's only supposed to change when it's hovering.
my menu code in css:
.link{
float:left;
text-decoration:none;
color:#000000;
font-size:19px;
background:opacity:0.4;
width:130px;
padding-bottom:8px;
padding-top:8px;
padding-right:25px;
text-align:left;
padding-left:8px;
border-bottom:1px solid black;
border-top:1px solid black;
color:black;
line-height:1.5;
overflow:hidden;
text-align:left;
-webkit-transition: all 1s ease;
}
a:link:hover
{
background-color:black;
color:#18ffec;}
relevant code in html:
<div id="linki">
<p>
<a class="link" href="Index.html"> Hjem</a>
<a class="link" href="Guider.html"> Guider</a>
<a class="link" href="Om_oss.html"> Om oss</a>
<a class="link" href="Kontakt.html"> Kontakt oss</a>
<a class="link" href="Hjelp til"> Hjelp til </a>
</p>
</div>
appreciate any answer :)
You are specifying the class wrong, use a "." instead of a ":"
a.link:hover
I think you mean
a.link:hover
rather than
a:link:hover
You should use class name:
.link:hover
{
background-color:black;
color:#18ffec;
}
:link is a "a normal, unvisited link" so when it's visited the hover will not work. There is no need for a.link you can use just class name in this case.
Related
I'm trying to change the text color of "Sale" item, but not a phone number with only CSS. I can't edit HTML code.
.menu.left a:first-child {
background: yellow;
color: red;
}
Results in both yellow & red
.menu.left li:nth-child(2)`
background: yellow;
color: red;
}
Results in only yellow background
Do you have an idea how to solve this?
You can target the <li> or the <a>
in this case i target the second li and then the a so the font changes to red.
If you only target the li, the font wont change to red.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
Example targeting the <a>
.menu.left li:nth-child(2) a{
background-color: yellow;
color: red;
}
<ul class="menu left">
<li>
1231233123
</li>
<li>
Sale
</li>
</ul>
Example only targeting the <li>
.menu.left li:nth-child(2){
background-color: yellow;
color: red;
}
<ul class="menu left">
<li>
1231233123
</li>
<li>
Sale
</li>
</ul>
Comment by OP
"Thank you, Gerardo, your solution worked very well. I run into trouble though with mobile version of this link. Maybe you could take a look? codepen.io/anon/pen/xYJKRW "
On your comment you added a codepen, where you have the same mistake. You are trying to target the <li> when you have to target the <a> try this:
[data-mobile-dropdown-rel="sale"] a {
color: red;
}
.menu.left li:nth-child(2) a {
background: yellow;
color: red;
}
Add color:red; to .menu.left li:nth-child(2) and keep the background:yellow; where it is now. Your trying to change the font color of the <a> tag not the <li>.
This is supposed to work:
ul.menu li:nth-child(2) a {
background-color: yellow;
color: red;
}
For changing color of <a> you have to change color of <a> directly. Otherwise it won't work. In this case you have to change color of <a> not <li>. That is why it does not work.
I have two separate divs, why is the background color the same lime color for both? I want the first div white.
Here's the HTML:
<div id="head1">
<ul>
<li><a class="menu" href="#">Link one</a></li>
<li><a class="menu" href="#">Link two</a></li>
<li><a class="menu" href="#">Link three</a></li>
<li><a class="menu" href="#">Link four</a></li>
</ul>
</div>
<div id="title1">
<h1>some title</h1>
</div>
Heres the CSS:
#head1 {
}
#title1 {
height:100px;
background-color:lime;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
border-bottom:2px aqua dashed;
}
li {
display:inline;
}
a.menu {
float:left;
width:6em;
text-decoration:none;
color:#666666;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.menu:hover {
background-color:#ff3300;
}
h1 {
font-family: Gautami;
font-size:300%;
color: #FFFFFF;
}
When you float the list, the #title div essentially appears as if it's behind it. To correct this, add overflow:auto to your #head1 element
#head1 {
overflow:auto;
}
jsFiddle example
It's actually white. You just can't see it.
Because the ul (and other elements) are floated left, those elemente are taken out of the DOM's normal flow. What this basically means is that the parent div, #head1 no longer "sees" the ul. Because of this, the height of the div becomes 0px tall.
Here's a fiddle demonstrating this: http://jsfiddle.net/w858z/
As you can see, #head1 has a red border, but the height is 0px. If we remove the floats, the ul is now in the normal flow.
Here's an updated fiddle with the floats removed: http://jsfiddle.net/48Ahm/
The fix for this is to use either a clearfix or simply overflow:auto.
overflow example: http://jsfiddle.net/w858z/1/
clearfix example: http://jsfiddle.net/w858z/2/
Here's a stackoverflow discussing additional css properties that will result in an element being taken out of dom flow: What are the CSS properties that get elements out of the normal flow?
You just need to clear the second div clear: both;
I made a jsfiddle :
http://jsfiddle.net/5gwZ6/
I am using joomla 3 and bootstrap.min.js
I am creating menu and giving special class in order to change hover, active, visited links and style of the menu.
I could not find how to change active link color of menu.
Suppose I have 2 menu. Home and Contact.
When I am in Home it is red, I want to change this color.
I could change a:active and a:hover.
Here is code;
.topmenu .active a,
.topmenu .active a:hover {
background-color: white;
}
.topmenu > li > a{
color: orange;
font-weight:bold;
}
.topmenu > li > a:hover {
color: black;
background:white;
}
Even I used div to change color of active link.
Here is code
#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
color: orange;
}
#top-menu a:hover{
color: black;
}
Every time when I click to Home it is activated and the color is red. What I want to change it to orange. Can not find how to do it.
Here is my markup code
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active">Home</li>
<li class="item-138"> Russian </li>
<li class="item-110"></li></ul>
</div>
What do you suggest me to do?
Finally with experiments I found how to capture it.
#top-menu .current a
{
color: orange !important;
}
Thank you everyone for your time and help.
Much appreciated!
In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.
Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).
Finally, if you are trying to do this using just CSS you have to add a specific class on the current link that the end user is on. Below I left you an example hope this helps :)
Your Navigation Bar As Follows
-Home
-Russia
-Italy
We are on the Italy Page For This Example:
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li>Home</li>
<li>Russian</li>
<li class="activePage">Italy</li><!--Page End User Is On-->
<!--Look UP ^^^^^^^^ Hope this helps :)-->
</ul>
</div>
Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.
The reason this worked is because I added !important at the end of the color for that separate class.
.activePage {
color: #0CF !important
}
So to apply this same technique to your other pages it would simply look like this:
Home Page
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link {
color: #777;
}
/* visited link grey */
#top-menu a:visited {
color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
color: #0CF;
}
/* selected link blue */
#top-menu a:active {
color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
color: #0CF !important
}
<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="activePage">Home</li>
<li>Russian</li>
<li>Italy</li>
</ul>
</div>
I hope I gave you a solid answer to your question because I hate it when I look all over the web and can't truly find the answer I am looking for.
I suggest you creating an ID (#) selector locally for the Div that contains the a links, then take that id name in your style-sheet and override the existing rule.
For instance,
#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}
Hope this helps.
For change the current active link color we can use code in external css file or inline css
.active a
{
background-color:#ff0000;
}
// Fix navigation menu active links
$(document).ready(function(){
var path = window.location.pathname,
link = window.location.href
;
$('a[href="'+path+'"], a[href="'+link+'"]').parent('li').addClass('active');
});
$(function (){
$('nav ul li a.sub-menu').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
Try changing your CSS to .item-109 { color: white !important; }.
Here's a link with more information on !important.
If you want to globally change the link colors (or pretty much anything else), create a customized download: http://twitter.github.io/bootstrap/customize.html
In response to your comment, if you want to override the supplied CSS, you need to create a rule that is more specific. So, either create a selector like #my-custom-container .item-109 .current .active or add a !important to your rule(s) for .item-109 .current .active
first add php code in link
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'index') { echo 'active'; } ?>" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'about-us') { echo 'active'; } ?>" href="about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link <?php if(PAGE == 'contact-us') { echo 'active'; } ?>" href="contact-us.php">Contact Us</a>
</li>
</ul>
then in every page
How do I make my links appear as images, and have them change with hover and so on? I already have the button images. Basically the website I'm making is pretty basic, but it's nice. The one issue I'm having is with my nav bar. The navigation bar has four links, and I want them to appear as images, and change with hover. The links are in an unordered list - it looks like this:
<ul class="navbar">
<li>Home page
<li>Information
<li>Forum
<li>Interests
</ul>
I have the CSS, and I'm looking to attribute images to each link. I know how to add colors but not images.
You can go about placing images in your captions as such:
<a href="#">
<img src="images/yourImage.png" alt="Your Image">
</a>
You can then use jquery to change the source of the image once its hovered on.
Hope this helps you:
See at http://jsbin.com/acuhuy/5/edit
<div id="nav">
<ul id="menu">
<li class="menu-item">Home Page</li>
<li class="menu-item">Information</li>
<li class="menu-item">Forum</li>
<li class="menu-item">Interests</li>
</ul>
</div>
CSS
div#nav{
position:relative;
}
ul#menu{
}
li.menu-item{
list-style:none;
position:relative;
float:left;
width:80px;
height:27px;
padding-top:2px;
margin-right:5px;
text-align:center;
background-image:url('http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_black_rectangle.png');
background-size:80px 27px;
background-repeat:no-repeat;
cursor:pointer;
}
li.menu-item a{
text-decoration:none;
color:#f0f0f0;
}
li.menu-item:hover{
opacity:0.8;
}
To my knowledge, the answer to this is no, can't be done, but I need a second opinion:
If I have the following:
<li>
<a >#</a>
<div class="sub">
#
</div>
</li>
and have a background image that appears on li a:hover is it possible to have that background stay on when hovering on the .sub div? This also has to work pure CSS - no javascript cheats.
My understanding is because .sub isn't a child of the a we can't reference it in css to keep the hover.
Because the image is for only one section of the code, I can't move it to the li and reference li:hover a.
Not sure what all you are trying to achieve, but there are many hover effects that can be done.
SECOND UPDATE: If you don't need to interact (other a tags, etc) at all with anything in the div, then this way cheats to get the effect. Note how the anchor inside the div does not register because of the z-index.
UPDATE I think I understand your issue better now. Can you add a wrapper and do the following?:
Example HTML:
<ul>
<li>
<div>
<a>Some anchor text</a>
<div class="sub">Some div content <a>and anchor</a></div>
</div>
</li>
</ul>
Example CSS:
li:hover {
background-color: cyan;
}
li > div:hover > a {
background-color: green;
}
a:hover {
color: yellow;
display: block;
}
a:hover + .sub {
outline: 1px solid blue;
}
.sub:hover {
color: red;
outline: 1px solid red;
}
If you can't use a class on the li or modify the div.sub to be in the a, you're probably out of luck without Javascript:
Is there a CSS parent selector?
However, if you can, you could use:
<ul>
<li class="sub">
<a>Class #</a>
<div class="sub">#</div>
</li>
<li>
<a>Inner #
<div class="sub">#</div>
</a>
</li>
<li>
<a>None #</a>
<div class="sub">#</div>
</li>
</ul>
li.sub:hover,
li a:hover {
background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG);
}
li a {
border: 1px solid blue;
display: block;
}
.sub {
border: 1px solid green;
}
http://jsfiddle.net/B7Au2/4/
I don't know if you can modify the html, but if you can, try swapping the div and the a:
<li>
<div class="sub">
#
</div>
<a >#</a>
</li>
Now you can use the adjacent sibling selector:
li a:hover, li .sub:hover + a {background:url('some-image.png')}
Unfortunately there's no way to select the previous element through CSS: that's why you need to swap your elements.