Hello please why if I hover on<li> from <ul class='menu controls'> change background but not change color. I know that .controls a have color and it is more than class color for li but if I want addClass for <a> dont work it if i change var li = $(".controls").find('li'); to var li = $(".controls").find('a'); so this dont work why ?
https://codepen.io/Lukinezko/pen/qBOJEad
Add this to your css:
.selected a {
color: white;
}
By the way, you can do this completely with css without js! with just 2-3 lines of css codes..
Related
please guide me as i'm trying to learn.
1) I am trying to make this list to expand when it hover. It work on my browser but not on jsfiddle. But problem is it wont stop expand and shrink when I move my mouse over it several time.
2) How do I make the list by the time it expand, my div will got grow longer, everything stay inside the div. I have try overflow:hidden but it doesn't work.
3) The hover that I try to make in CSS was to only change the font color of the main name but it change color of the whole name.
my JFiddle http://jsfiddle.net/Y3tc6/1/
THE JQUERY
$(".subli").hide();
$(".mainli").on("click", function (e) {
e.preventDefault();
$(this).find(".subli").slideToggle();
});
Thank You
Try this:
$(".mainli").on("mouseover", function (e) {
$(this).find(".subli").slideDown();
});
$(".mainli").on("mouseout", function (e) {
$(this).find(".subli").slideUp();
});
You will have to make some css changes. But i think this will help you with your slide down and slide up
2) How do I make the list by the time it expand, my div will got grow longer, everything stay inside the div. I have try overflow:hidden but it doesn't work.
#droplist {
display:block;
max-height:212px;
width:250px;
background-color:grey;
overflow:auto;
}
3) The hover that I try to make in CSS was to only change the font color of the main name but it change color of the whole name.
#droplist > ul > li:hover {
color:red;
}
#droplist li ul {
color:#000;
}
JSFiddle http://jsfiddle.net/Y3tc6/4/
For more information of > on CSS.
CSS '>' selector; what is it?
Sorry if it's messy, on the 3rd number.
My last edit! XD
1) Use mouseenter and mouseleave
$(".subli").hide();
$(".mainli").mouseenter(function (e) {
$(this).find(".subli").slideDown();
});
$(".mainli").mouseleave(function (e) {
$(this).find(".subli").slideUp();
});
2 & 3) You need to be more specific in you CSS to get the colors right, and use block, max-height and overflow to make the height of the div constant
#droplist {
display:block;
max-height:250px;
height:250px;
width:250px;
background-color:grey;
overflow: hidden;
}
#droplist .mainli:hover li {
color:initial;
}
#droplist .mainli:hover,
#droplist .mainli li:hover {
color:red;
}
Working demo
Try this:
$(".subli").hide();
$(".mainli").hover( function (e) {
e.preventDefault();
$(this).find(".subli").stop(true).slideToggle();
}
);
I am getting problem here:
<ul id="parentnode">
<li><span>I need color change here</span><span>no color</span><span>nocolor</span></li>
<!-- continuing li tags from database -->
</ul>
Here, Onmouseover <li> tag i have to change the color of text which is inside the <span> first-child. Is it possible to change through Javascript, How ?
Note: It is not possible to give id's to <li> tag or <span> tag, because they are dynamically presenting from database.
Thank you.
You can do it by the following css
#parentnode li:first-child:hover span:first-child { color: red; }
SEE DEMO
*EDIT: link was invalid, removed slash
Try this in your CSS:
ul#parentnode > li:first-child:hover > span:first-child {
color: blue;
}
and change "blue" with whatever color you want
ul#parentnode > li:first-child:hover > span:first-child {
color: ;
}
I have a link called "Navigation" I want the link colour to change as I click on it and stay changed. For example: Default colour is blue. When I click on the link it goes to another tab and the color turns to green and it should remain green.
here is the code so far:
<style type="text/css">
a.specialAnchor
{
font-size: 1em;
text-align: right;
padding: 10px;
padding-right: 15px;
color: #0066FF;
}
a.specialAnchor:link
{
color: #0066FF;
}
a.specialAnchor:visited
{
color: Green;
}
a.specialAnchor:hover
{
color:Orange;
text-decoration:underline;
}
a.specialAnchor:active
{
color: Green;
text-decoration:underline;
}
<asp:LinkButton ID="Navigation" runat="server" BorderStyle="None" CssClass ="specialAnchor"
PostBackUrl="~/navigation.aspx">Navigation</asp:LinkButton>
This does not give me the results I want Please help.
Basically my webpage looks a something like this:
there are four tabs: A, Navigation, C, D
And in all those four tabs there are links at the bottom of the page.
When you are on A and you click on Navigation link, it will take you to Navigation page. What I want is to change the colour of the link when it is clicked on or visited.
Thank you
Have you tried changing the color of the visited pseudo class to green? Try that and see if works the way you want?
Ok, given that you have a link like this
<a class="spec" href="wherever">Link</a>
You need styles like this
<style type="text/css">
.spec:link {color:#FF0000;} /* unvisited link */
.spec:visited {color:#00FF00;} /* visited link */
.spec:hover {color:#FF00FF;} /* mouse over link */
.spec:active {color:#0000FF;} /* selected link */
</style>
Done on the tryit editor at w3schools :)
If changing your :visited pseudoclass doesn't give you what you want, try changing the style onclick with jQuery:
$('a.specialAnchor').click(function() {
this.style.color = 'green';
}
Try something like this
$(document).ready(function () {
$('.changecolor').click(function () {
$(this).css("color", "red");
});
});
<a class="changecolor">Click To Change</a>
If you need to change the color back to what it was, you can use .toggle()
This is the simple HTML code:
<li class="main">
ImageLink <!--1st anchor tag-->
ImageName <!--2nd anchor tag-->
</li>
Is it possible to change the color of 2nd anchor tag on hover state of 1st anchor tag? (And vice versa.)
Not with css. This kind of actions can only be done by script.
If you use jQuery you could add the following script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function(){
var a1 = $('a:first');
var a2 = $('a:second');
a1.hover(function(){ a2.toggleClass('hover') }, function(){ a2.toggleClass('hover') });
a2.hover(function(){ a1.toggleClass('hover') }, function(){ a1.toggleClass('hover') });
});
</script>
Now you can use the hover class to specify the color:
.hover { color: red; }
Edit
It would be easier to give both a's an id, so you could reference them by using var a1 = $('#a1');.
With CSS, it's possible to change the color of the 2nd anchor tag on hover of the 1st anchor tag with a sibling selector, but I don't think you can do it vice-versa:
a:hover + a {
color: red;
}
JSFiddle preview: http://jsfiddle.net/9Ezt5/
See http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
However, note that adjacent sibling selectors are not supported on all browsers: http://www.quirksmode.org/css/contents.html
Yes you can do it with pure css.
for example:
a:hover + a{
background:red;
}
Check this for more
http://jsfiddle.net/Bw5by/
In Jquery you can do it like this,
$("#first").hover(function(){
$('#second').css('color','red')
},function(){
$('#second').css('color','blue')
});
See it in action here,
http://jsfiddle.net/gagan/NYAHY/1/
If those are the only two links in the list item tag, then you could do something like this:
li.main:hover a
{
color: red;
}
li.main a:hover
{
color: blue;
}
Then your hovered link will be blue, and all the other ones (in this case just that other one) will be red.
So for example i have two links:
<a onClick="doColorChange()">Link 1</a>
<a onClick="doColorChange()">Link 2</a>
I want it so that when I click Link 1, Link 1 changes to color blue to represent selected, Link 2 stays black. When the user clicks Link 2, then Link 2 changes color to blue and Link 1 changes color back to white.
I currently have a default CSS property for links:
a:link {
color: #green;
}
I am unsure of the best way to handle the "doColorChange()" function. Is it best to create two CSS classes for the two colors, then have doColorChange switch them? Or is it better to give the two links an id and somehow set color properties there? How do I accomplish this?
JQUERY:
$(function() {
var links = $('a.link').click(function() {
links.removeClass('active');
$(this).addClass('active');
});
});
HTML MARKUP:
Link 1
Link 2
I suggest adding a class to the links, that way it's easier.
CSS:
a.link.active { color:blue; }
Added a Live Version (fiddle): http://jsfiddle.net/gHb9F/
HTML
Link 1
Link 2
Script (using jQuery)
$(document).ready(function(){
$('a').click(function(){
$('a').css('color', 'black');
$(this).css('color', 'blue');
});
});
CSS
a:link { color: black; }
a:visited { color: black; }
Fiddle here
Note: The color change will be applied to all anchors current on your page. If you want to limit it to a select few, then put them in a class and add that class to the selector.
Edit:
If you plan on doing anything other than simple color swap, then classes are definitely the way to go (just substitute the .css calls for .addClass and .removeClass with your custom class names.
Try this code. I found it simple to use.
<script type="text/javascript">
var currentLink = null;
function changeLinkColor(link){
if(currentLink!=null){
currentLink.style.color = link.style.color; //You may put any color you want
}
link.style.color = 'blue';
currentLink = link;
}
</script>
<a onClick="changeLinkColor(this)">Link 1</a>
<a onClick="changeLinkColor(this)">Link 2</a>
var doColorChange=function(){ this.style.color="blue";}
Your default CSS colour for links should be:
a:link {
color: #0f0; /* or
color: green;
color: rgb(0,255,0);
}
Otherwise, using jQuery, you can achieve this with:
$('a').click(
function(){
$('.selectedLink').removeClass('selectedLink');
$(this).addClass('selectedLink');
return false
});
Coupled with the CSS:
.selectedLink {
color: #00f;
}
JS Fiddle demo.
Make 2 different classes in css and then swap classes on the links when you click on your link.
CSS
a.link{
color : green;
}
a.selected{
color : black;
}
Javascript
jQuery(a).click(function()
{
jQuery('a.selected').addClass('link');
jQuery('a.selected').removeClass('selected');
jQuery(this).removeClass('link');
jQuery(this).addClass('selected');
});
giving the elements css classes would be a better option. You could do it by using the className property on the object. in doCOlorChange you could write this.className ="newclassName";