this is a part of a code in which i'm trying to change the menu item color when hover on a different div. I can modify the background color but not the actual text color.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.navigation li a { color: grey;}
</style>
</head>
<body>
<ul class="navigation" id="nav">
<li id="a" onmouseover="chbg('red')" onmouseout="chbg('black')">ABOUT </li>
<li id="b" onmouseover="chbg1('red')" onmouseout="chbg1('white')">CONTENT</li>
</ul>
<script type="text/javascript">
function chbg(color) {
document.getElementById('b').style.Color = color;
}
function chbg1(color) {
document.getElementById('a').style.backgroundColor = color;
}
</script>
</body>
</html>`
Need help in solving this issue.
Thanks
You are applying color to the li but the a is already getting color: gray; from the CSS.
As mentioned in the comment you would be much better off handling stuff like this with CSS and not JavaScript.
a {
color: gray;
}
a:hover,
a:focus {
color: red;
}
li:hover {
background-color: gray;
}
EDIT: It also seems like you misspelled gray. In CSS the american spelling is used. This is part of why I use hex-values in stead.
Use CSS its much easier
.navigation #a {
background:black;
}
.navigation #b {
background:white;
}
.navigation li:hover {
background:black;
}
Demo
#a {
background-color: black;
}
#b {
background-color: white;
}
#b:hover {
background-color: red;
}
#a:hover > a {
color: green;
}
#b:hover > a {
color: yellow;
}
HTML
<ul class="navigation" id="nav">
<li id="a">ABOUT
</li>
<li id="b">CONTENT
</li>
</ul>
Related
I have created a page with different background colors. What I'm trying to achieve is to change color fixed nav links on different sections. Like I've given custom class of light and dark respectively to the sections. And want to change color of nav links as the sections scrolls.
I'm a newbie to js and jquery, please let me know how can i achive this, I'm getting ideas to how to do, but i'm not able to execute it (or write it in a proper way)
This is what I have yet
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
<div class="one m-light"></div>
<div class="two m-dark"></div>
<div class="three m-light"></div>
<div class="four m-dark"></div>
<style>
.nav{
position:fixed;
}
.nav li {
display: inline-block;
list-style: none;
height: 60px; /* should be the same as line-height */
line-height: 60px;
padding: 0 40px;
}
.nav-link {
color: #000;
text-decoration: none;
mix-blend-mode:difference !important;
}
.one, .two, .three, .four{
height:100vh;
width:100%;
}
.one{
background:#f1f1f1;
}
.two{
background:#050505;
}
.three{
background:#f4f4f4;
}
.four{
background:#030303;
}
</style>
<script>
$(document).ready(function(){
var scroll_pos = 0;
var darkSection = $('.m-dark')
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(darkSection > scroll_pos) {
$('.nav-link').css('color', '#000');
} else {
$('.nav-link').css('color', '#fff');
}
});
});
</script>
index.htm:
styles.css:
.menubar .sub_menu {
background-color: aqua;
}
<li class="fa fa-code">
Skills
<ul class="sub_menu">
<li>Front-End</li>
<li>Back-End</li>
<li>Full-Stack</li>
</ul>
</li>
try this.
.sub_menu {
background-color: aqua;
}
your CSS suggests that the class sub_menu should be under the class menubar. You can try removing that requirement
.sub_menu {
background-color: aqua;
}
(My java script is under basic, i’m in learning process)
I’m trying to make a menu navigation with some copy-paste from scripts i found here, but the result is not as perfect as i would like.
That’s the point, i want:
Clicking one –div–
Shows the –li– from its –ul–
Others –div– get hidden
Clicking the –li– links doesn’t show others –div–, they keep hidden
Clicking back the same –div–
All –li– get hidden
Show all others –div– and –ul– (not the –li–)
Hope the question is clear, i appreciate any comment.
Thanks!
$(document).ready(function () {
$("ul").click(function (evt) {
if(evt.target.tagName != 'UL')
return;
$("li", this).toggle();
});
});
$(".SHOW").click(function(){
$(this).siblings("div").toggle();
});
ul li{list-style: none;}
a {text-decoration: none;}
ul a {color: black;}
li a {color: #493A3A;; }
.GER, .ARG, .SPAIN {
position: absolute;
width: 200px;
text-align: center;
border: solid 2px gray;
margin: 0;
padding: 0;
font-size: 30px;
line-heigth: 40px;
}
.ARG {left: 220px; top: 8px}
.SPAIN {left: 431px; top: 8px}
.GERLI, .ARGLI, .SPALI {font-size: 18px; height: 35px; line-height:36px; display:none}
.GERLI:nth-child(1) {background-color: yellow;}
.GERLI:nth-child(2) {background-color: Red;}
.GERLI:nth-child(3) {background-color: Black;}
.ARGLI:nth-child(1) {background-color: lightblue;}
.ARGLI:nth-child(2) {background-color: white;}
.ARGLI:nth-child(3) {background-color: lightblue;}
.SPALI:nth-child(1) {background-color: red;}
.SPALI:nth-child(2) {background-color: yellow;}
.SPALI:nth-child(3) {background-color: red;}
.GER:hover, .ARG:hover, .SPAIN:hover{background-color: lightgray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SHOW">
<ul class="GER">Germany
<li class="GERLI">Bratwurst</li>
<li class="GERLI">Chucrut</li>
<li class="GERLI">Ketchup</li>
</ul>
</div>
<div class="SHOW">
<ul class="ARG">Argentina
<li class="ARGLI">Churrasco</li>
<li class="ARGLI">Mate</li>
<li class="ARGLI">Pampa</li>
</ul>
</div>
<div class="SHOW">
<ul class="SPAIN">Spain
<li class="SPALI">Paella</li>
<li class="SPALI">Flamenco</li>
<li class="SPALI">Toros</li>
</ul>
</div>
The jsfiddle:
jsfiddle
You arent thinking of these as boxes, when you click on a li you are actually clicking on the entire ul and the div. You need to not only specify which you are clicking on but you also need to start using IDs, classes can only go so far with javascript. I fixed it in here
$(document).ready(function () {
$("ul").click(function (evt) {
if(evt.target.tagName != 'UL')
return;
$("li", this).toggle();
});
});
$(".GER").click(function(e){
if(e.target.id === "GER")
$(this).parent().siblings("div").toggle();
});
$(".ARG").click(function(e){
if(e.target.id === "ARG")
$(this).parent().siblings("div").toggle();
});
$(".SPAIN").click(function(e){
if(e.target.id === "SPA")
$(this).parent().siblings("div").toggle();
});
ul li{list-style: none;}
a {text-decoration: none;}
ul a {color: black;}
li a {color: #493A3A;; }
.GER, .ARG, .SPAIN {
position: absolute;
width: 200px;
text-align: center;
border: solid 2px gray;
margin: 0;
padding: 0;
font-size: 30px;
line-heigth: 40px;
}
.ARG {left: 220px; top: 8px}
.SPAIN {left: 431px; top: 8px}
.GERLI, .ARGLI, .SPALI {font-size: 18px; height: 35px; line-height:36px; display:none}
.GERLI:nth-child(1) {background-color: yellow;}
.GERLI:nth-child(2) {background-color: Red;}
.GERLI:nth-child(3) {background-color: Black;}
.ARGLI:nth-child(1) {background-color: lightblue;}
.ARGLI:nth-child(2) {background-color: white;}
.ARGLI:nth-child(3) {background-color: lightblue;}
.SPALI:nth-child(1) {background-color: red;}
.SPALI:nth-child(2) {background-color: yellow;}
.SPALI:nth-child(3) {background-color: red;}
.GER:hover, .ARG:hover, .SPAIN:hover{background-color: lightgray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SHOW">
<ul class="GER" id="GER">Germany
<li class="GERLI">Bratwurst</li>
<li class="GERLI">Chucrut</li>
<li class="GERLI">Ketchup</li>
</ul>
</div>
<div class="SHOW">
<ul class="ARG" id="ARG">Argentina
<li class="ARGLI">Churrasco</li>
<li class="ARGLI">Mate</li>
<li class="ARGLI">Pampa</li>
</ul>
</div>
<div class="SHOW">
<ul class="SPAIN" id="SPA">Spain
<li class="SPALI">Paella</li>
<li class="SPALI">Flamenco</li>
<li class="SPALI">Toros</li>
</ul>
</div>
I'm trying to make a div open when you hover a link. Which is simple enough and I'm doing fine. But I also want to be able to access the div without it closing. So if I hover over the newly opened div it will stay open. But If I hover out of the div I want it to close.
I also want to make sure that if I hover out of the link that the div closes. I have done this a few times before but for the life of me I cant sort it back out. I remember using setTimeout previously but my mind has went to mush and it's late so thought I might as well ask for some help.
I'm also aware that mouseenter and mouseleave would be far better than hover in this situation I just typed it up as hover for speed.
UPDATE
Changing the HTML is not an option this is a jquery question not an html or CSS one.
jQuery(document).ready(function($) {
"use strict";
$("li.true a").hover(
function() {
$(".open").fadeIn(1000);
}, function() {
$(".open").fadeOut(1000);
}
);
$(".open").hover(
function() {
$(this).show();
}, function() {
$(this).fadeOut(1000);
}
);
});
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
background-color: red;
width: 100%;
height: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true"><a>true</a>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
<div class="open"></div>
Move the div with the class open to the li as child element. The JS is now also simpler for your case. You can find the fiddle here: https://jsfiddle.net/ej5gkgat/.
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true">
<a>true</a>
<div class="open"></div>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
New CSS:
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
position: absolute;
background-color: red;
width: 300px;
height: 300px;
display: none;
}
New JS:
jQuery(document).ready(function($) {
"use strict";
$("li.true").hover(
function() {
$(".open").fadeIn(1000);
}, function() {
$(".open").fadeOut(1000);
}
);
});
Simple solution is not to use both parameters of hover in jquery.
when hover on "li.true a" simply ignore the second parameter, which hides your div. use null to skip on div.open's hover.
but if you ask for the right way. use CSS for these type of interactions. there is no need for JS to do this.
Edit: If you need to hide it when on siblings of "li.true a"'s hover.
jQuery(document).ready(function($) {
"use strict";
$("li.true a").hover(
function() {
$(".open").fadeIn(1000);
}
);
$("li:not(.true) a").hover(
function() {
$(".open").fadeOut(1000);
}
);
$(".open").hover(null, function() {
$(this).fadeOut(1000);
}
);
});
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
background-color: red;
width: 100%;
height: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true"><a>true</a>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
<div class="open"></div>
Use this js it uses timeout
jQuery(document).ready(function($) {
"use strict";
var t;
$("li.true a, .open").hover( function() {
clearTimeout (t);
$(".open").fadeIn(1000);
}, function() {
clearTimeout (t);
t = setTimeout(function(){
$(".open").fadeOut(1000);
},1000);
} );
});
You can do this with only css:
body{ font-family:sans-serif; }
nav {
background:blue;
padding:12px;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
padding:6px;
border:1px inset white;
cursor:pointer;
transition:all .5s;
background:red;
}
ul li:hover {
background:white;
color:black;
}
ul ul {
display:none;
}
ul li:hover > ul {
display:inherit;
position:absolute;
top:68px;
float:none;
}
ul ul li {
display:inherit;
float:none;
position:relative;
left:-47px;
}
HTML:
<nav>
<ul>
<li> Example.com </li>
<li> Languages
<ul>
<li> HTML </li>
<li> CSS </li>
<li> Javascript </li>
</ul>
</li>
<li> Something
<ul>
<li> Something </li>
</ul>
</li>
</ul>
</nav>
You can try doing it without timeout (not a big fan of), but with fadeTo() and stop()
Opacity is used to check visibility and calculate estimate remaining fade time.
JSFiddle example
jQuery(document).ready(function($) {
"use strict";
var fadeout = 1000;
var fadein = 800;
$("li.true a").hover(function() {
var opacity = $(".open").css("opacity");
opacity = opacity && opacity < 0.8 ? opacity : 0;
$(".open").stop(true).fadeTo(fadein*(1-opacity), 1);
}, function() {
var opacity = $(".open").css("opacity");
if (opacity > 0) $(".open").fadeTo(fadeout, 0);
});
$(".open").hover(function() {
var opacity = $(this).css("opacity");
if (opacity > 0) $(this).stop(true).fadeTo(fadein*(1-opacity), 1);
}, function() {
$(this).fadeTo(fadeout, 0);
});
});
I have been searching for an answer for this question but still, my problem exists. I tried all the answers from here (StackOverflow) and from other websites but it still didn't solved my problem.
Additional Information:
There's no error on DevTools.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<script src="sample.js"></script>
</body>
</html>
CSS:
/*Nav Styles*/
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu {
color: red;
}
JS:
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(x);
Thanks a lot!
The issue is because your CSS rule for .activeMenu is not specific enough to override the colour set on the a element. You need to make the rule more specific:
.activeMenu a {
color: red;
}
Or set !important on it. The former is better practice.
Example fiddle
You must change your css too:
.activeMenu a {
color: red;
}
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(function() {
x();
});
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>