Develop Reference

How to Change Entire Navbar Color When Hovering on Element in a Navbar

I am setting up my own website, and before I do that, I am working on understanding what I want to do following along with a W3 Schools tutorial.
When you click open, it brings up the overlay properly, and when you hover over the text in the overlay, the text changes color, but I want to make it so that when you hover over text, the background of the overlay changes to an image. As it stands the overlay color is gray, but when I hover over something say "dogs" I want the background to be replaced by a picture of a dog.
I have tried to use the CSS :hover function but was only able to have it change the background-color of the individual navbar element, not the whole overlay.
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
background-color: red;
}
This only changes the background color of the navbar element.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push
Here is the link to the w3 schools tryIt site, to see the rest of the code.

In CSS you can not change the style of a parent element by Hovering a children element.
You will need Javascript.

I was able to figure it out, by using JQuery, and this is the code that ended up working for me.
<script>
$(".about").hover(function(){
$(this).parent().parent().css("background","red");
});
$(".about").mouseleave(function(){
$(this).parent().parent().css("background","blue");
});
</script>
So basicaly what is happening here is that I have a navbar, which has different links in it each with there own class (for example as you can see here "about" is one). And what I have JQuery do is when you hover over a specific element, it changes the background of the parent attribute.
Note I had to do .parent().parent() because of the way I have it setup, it may be possible to do it with just one .parent().
And then what happensis when you hover over the element in the class it will changed the css of the parent attribute, and then when you the mouse exits the element, the background will go back to what it was originally, so in this case blue.
I hope this helps anyone if they ever have a similar question!

Change anchor tag background color on an onclick event

Trying to change the background color when the hyperlink is clicked, but since there is an onclick event it appears that the click default behaviour is taken away so the active style does nothing. Would prefer to do this using CSS.
CSS:
a.myanchor.sunsetred a:active {
background-color: yellow;
}
HTML:
<p>
<a onclick="displayText("Hello world") return false;" href="#" class="myanchor sunsetred">Click to display text</a>
</p>
Any ideas that could help?

I can not see any difference with or without the onclick parameter. (In Chrome) Just to make sure, you know the active state is applied during the click. As soon as you release the mouse button, the state is released. Maybe you mean :focus instead.
Either way, I believe you have a syntax error in your style declaration. You are coloring active links inside other links, which doesn't make sense. You probably mean:
a.myanchor.sunsetred:active {
background-color: yellow;
}

Bootstrap navbar showing border after modal popup have been hidden

I use Bootstrap in my Rails app, in it I have a navbar that contains some elements. When I press one of these elements I present a modal popup. When I close this popup, the clicked element for some reason gets highlighted. This isn't the experience I'm looking for.
See image below:
I wonder how I can get rid of this unwanted effect?

Without you supplying us with a Fiddle, it is very hard for us to determine what is going on exactly.
Although, from your image, it seems as if it is just 'focus'. Below is an image from the Bootstrap website, and it features one of their 'default' buttons. On the left is the button in its original state, and on the right is the button after I have clicked on it and it is in 'focus'. Chrome, by default (created by their 'user agent stylesheet') places this light blue border around elements once they are focused.
To remove the border for all fields you can use the following:
*:focus {
outline: none;
}
To remove the border for selected fields just apply this class to the input fields you want:
.nohighlight:focus {
outline:none;
}

*:focus
{
outline: none;
}
this is work like a charm

Changing font color on mouseover and click javascript or html

I have a couple of html links, that I have onmouseover and onmouseout set to change colors, what I want to be able to do is when I click one of the links, the links is set to a certain color and mouse over effect no longer works on the clicked link but does on the others. these links activate javascript functions but do not direct to another webpage.
Any ideas how I could do this?
<font style="font-family:pirulen; font-size:12px; margin-left:10px; "><b>Painting</b></font>
this is one of my links as you can see I have onmouseover and onmouseout set.

Use this CSS to get the hover effect
a{
color:#fff;
}
a:hover{
color:#FF6600;
}
a.selected,a.selected:hover{
color:#000000;
}
Now, on your function slidedown you can add a class .selected when you click on the link.
this.className = this.className + " selected";

You could add a certain styling class to your link when it is clicked which overwrites the other styling and suppresses the mouseover styling.

Apply the hover to a class and make a toogle that changes the link class when clicked, this way the hover will not be applied to the clicked link.

Fading Text Input Javascript Ajax

I am trying to find a script that would let me do what YP.com does. If you look at the business search input it says Business Name or Category. Then if you click on it, the text fades a little, and when you type words, it fades completely. How would I do this? Any help would be greatly appreciated.

You can have a look at this jQuery example :
http://www.benwatts.ca/2008/07/19/jquery-input-text-replacement/
Declare 2 CSS classes :
.black{
color:black;
}
.grey{
color:grey;
}
The default CSS class for your input can be the black class.
Like in the link above :
Use the focus event for changing the CSS to the grey class
Use the blur event for changing the CSS to the black class
Add the onKeyDown event to delete the original value and change the CSS to the black class.

You could use onfocus to do the first fade. Then onkeydown and fade completely.