I am having two hover classes as shown
.Link2:hover{
color:black;
}
.Li2:hover{
background-color: white;
border-color: white;
}
Here is the JSX part:
<ul>
<li className={classes.Li1}>
<Link onClick={this.menuDisappearHandler}
to='/buyer'
className={classes.Link1}>I want to Buy
</Link>
</li>
<li className={classes.Li2}>
<Link onClick={this.menuDisappearHandler}
to='/seller'
className={classes.Link2}>I want to Sell
</Link>
</li>
</ul>
I want both hover classes to execute when I hover over Li2. How can I achieve it?
How to affect other elements when one element is hovered
You could do this for example if they are next to each other in HTML.
.Li2:hover {
background-color: blue;
border-color: white;
}
.Li2:hover + .Link2 {
color: red;
}
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 work with bootstrap a lot and sometimes it's really hard to figure out why certain things don't work when you want to override certain CSS decisions bootstrap makes for you.
So i've been trying to change the background color on a button on hover so that each button gets a different color on mouse hover. But somehow my css class doesn't override it.
Here is what I have so far:
<style type="text/css">
.fblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.tblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.pred_background>li>a:hover, .fblue_background>li>a:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i></a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i></a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i></a></li>
PS: it also doesn't work when I put the class value between <li>
The problem is you're delcaring .fblue_background as if it's the parent of the li, this isn't the case. See revised code below:
<style type="text/css">
li>a.fblue_background:hover, li>a.fblue_background:focus {
background-color: blue !important;
}
li>a.tblue_background:hover, li>a.tblue_background:focus {
background-color: blue !important;
}
li>a.pred_background:hover, li>a.pred_background:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Hello</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Bonjour</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Hi</a></li>
When you are using the > method in CSS it would strictly follow the HTML markup. So when you want to change the a element, you should be doing
a.blue{
background:#0000ff;
}
Try this
.nav>li>.blue:hover, .nav>li>.red:focus {
background-color: blue !important;
}
.nav>li>.green:hover, .nav>li>.blue:focus {
background-color: #5EACC5 !important;
}
.nav>li>.red:hover, .nav>li>.red:focus {
background-color: red !important;
}
To change background of <a> link you just need to add :hover for class directly like this.
<style type="text/css">
.fblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.tblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.pred_background:hover, .fblue_background:focus {
background-color: red;
}
</style>
<ul>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Facebook</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Twitter</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Pinterest</a></li>
</ul>
jsfiddle link: https://jsfiddle.net/g9y2v91e/
Here is the plunker - http://plnkr.co/edit/WZ6cqCcXaLuOCXnZdCa6?p=preview
Is there a CSS way so that when I click on One or Two, it becomes class="active" for One or Two and removed from Home?
You can highlight each link with CSS alone, but not by using classes. Rather, use the :target pseudo class: http://codepen.io/pageaffairs/pen/kqoma
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
ul, li, div {margin: 0; padding: 0;}
ul {
list-style: none;
overflow: hidden;
padding: 10px;
}
li {
float: left;
margin: 0 20px 0 0;
}
li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #08c;
border-radius: 20px;
}
li a:hover, li a:target {
background: #08c;
color: white;
}
</style>
</head>
<body>
<h1>Hello <code>:target</code>!</h1>
<div class="header">
<ul class="nav nav-pills">
<li class="active">
Home
</li>
<li>
One
</li>
<li>
Two
</li>
</ul>
</div>
</body>
</html>
You will need to edit the html somehow, css doens't have the ability to change an elements class. You could write a little function to js to do this on a click event and remove the class from the old menu item and add it to the newly selected menu item.
like this:
http://plnkr.co/edit/6B5v2KrZonuI33dJySS6?p=preview
You can so this with jQuery, following this format:
switch (window.location.pathname) {
case '/THE_URL_HERE':
$('.nav-home').addClass('active');
break;
case '//THE_URL_HERE':
$('.nav-one').addClass('active');
break;
case '//THE_URL_HERE':
$('.nav-two').addClass('active');
break;
}
And add classes to your HTML:
<h1>Hello Plunker!</h1>
<div class="header">
<ul class="nav nav-pills">
<li class="nav-home">
Home
</li>
<li class="nav-one">One</li>
<li class="nav-two">Two</li>
</ul>
</div>
Not using CSS exclusively. Behavioral features, such as linking, and modification of the DOM are outside the scope of CSS.
However, you could construct the links to modify the query string of the URL (e.g. ?item=one) and use the resulting GET values to set classes on your navigation.
Or use javascript.
use :target it's more flexible if it's to make a menu without javascript
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
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.