Develop Reference

How to change image of each tab item when clicked and hover?

how to change yellow image to blue image in tabs when clicked and hover by jquery or css

You can use CSS filter properties to do this with CSS.
img:hover {filter: hue-rotate(165deg);}
Adjust hue-rotate value if needed.

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!

jQuery .show doesn't display the background

I am making the navigation bar for a website, and I want to add nice effects to it. Now there is a dropdown menu with submenu's, and I want those submenu's to slide in. But for some reason it doesn't show the background when animating, and the text goes on top of the border next to it. Here is a link to what it looks like. There is something weird happening as well when hovering over multiple times.
for some reason I have to accompany links to jsfiddle.net with code, so here it is.

You missed setting the color for the the #parnavdrop ul li. JSFiddle
#parnavdrop ul li {
background-color: #41D4CF;
}

Actually the issue is you have mentioned background-color to inherit.
.nav ul #navdrop #subnavdrop{
background-color:inherit;
}
So it is inheriting background color from its parent which is causing the issue.
So the following code change can also resolve the issue.
.nav ul #navdrop #subnavdrop{
background-color:#41D4CF;
}
Sometimes just because of these stop() functions JS functionality is not working properly

Darken Background - Without affecting elements itself. (Overlay?)

I want to darken my background. Normally, its as simple as putting an overlay with a lower z-index than the most front element like seen here:
(source: jankoatwarpspeed.com)
What I want to achieve now is to make the elements behind the overlay STILL be clickable, selectable and so on.
In this example, the links should be clickable, and the text above should be selectable, but STILL be this dark.
I guess I cant archive this with pure CSS, what would be your solution?
Thanks

Just disable pointer events on your overlay:
pointer-events: none;
Example:
http://codepen.io/anon/pen/ebcdz

See this fiddle.My technique is to add the same elements to the overlay div and to set the color of text of the href text to the background color of overlay so that it appears invisible.See this fiddle.
http://jsfiddle.net/5Ux5t/1/
CSS for href within overlay div to make it invisible
#overlay a{
color:black;
}
Actually there are links in the overlay too.I just added the above CSS to make them invisible.See this:
http://jsfiddle.net/5Ux5t/

setting div as a background

I have a div like which has an background, i like to set this div as an transparent background to certain dialog, like a jquery dialog. But the issue here is when the user scrolls the transparent div is also moving. i want this transparent div to be fixed even the scroll bar moves. How can i achieve this? Thanks.
Sample Code:
doc is an instance of html document. [doc instanceof HTMLDocument]
<div id=hiox1002 align=center style='display: none; z-index:3;opacity:0.4;\
filter:alpha(opacity=40);background-image:url(http://funflys.com/images/bg.png);background-repeat:repeat;\
width: "+doc.defaultView.innerWidth+"px; height: "+doc.defaultView.innerHeight+"px;/></div>
I am trying this for an firefox add on

Try adding a position:fixed style.

add position:fixed in your css..and have a look on this tutorial