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!

Hide div if nav is opened

I have a very simple page with the standard bootstrap nav which collapses when on small screen. Right below the nav I have a div which I do not want to show if the li has CSS class dropdown open. Is it possible to do this via CSS only or do I have to go down the jQuery/Javascript route?
.navbar-nav > li.dropdown.open {
/*How can I hide the div class="inner-details" here*/
}

If the dropdown element is not wrapped with another one, you could possibly use the adjecent sibling selector like this:
li.dropdown.open + .inner-details {
display: none;
}
Otherwise you could do tricks with negative margin and z-index, effectively sliding content from below the dropdown behind it, but really this will lead to messy layout.
There's no evil in using JavaScript. Bootstrap itself uses it for the navigation if I remember correctly.

jQuery/CSS - Whole Div Clickable, on hover activate a tag hover state

I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output

In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}

As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}

For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.

I am trying to display a block image on hover but just cant get it; with css3 and Html

before anything, this is my codepen, I am trying to pretty much hover over that and make it say about me. Ive tried a few things but it is just not clicking.
this is my link
http://codepen.io/willc86/pen/BrEmt
I was hoping someone can help explain to me how to change this to a solid background color (lets say all red) with font white saying "about me"
is it possible w/o JavaScript?

The trick is to apply the hover on something higher up.
You can't hover over something invisible. However, you can hover over the things which hold the invisible item.
So, instead of doing something like:
.hidden:hover { visibility: visible; }
Instead, put it on a parent element, like the li:
li:hover .hidden { visibility: visible; }
Now, when you hover over the li that contains the hidden item, the hidden item appears.
Now it's just a matter of tweaking that container to give you exactly what you want. =)

How to make link return to its normal (not active) state?

The idea was simple:
change li background color on hover to one color
ul#menu li a:hover {...}
change it on mouse press to the other color
ul#menu li a:active {...}
return the color to the original (normal) if the link is neither hover nor pressed
The problem appeared to be that, if user rejected his intention and let the mouse up away from the link, the back color stayed as if it had been pressed (i.e. a:active).
So it looks like the link gets "active" state and stays in it even after user releases mouse button.
EDIT
This is what I came up with the help of posters, who tried to answer this question: please, compare these fiddles:
Fiddle - working as desired
Fiddle - working as in real application
The difference is that the desired fiddle has no href. As soon as href is added, the link starts behaving as not desired. Both of them use:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#FF0000;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
while
<a>LINK</a>
LINK
Surely I have href set in my html, so how can I achieve Fiddle #1 behaviour?
So, it looks like it is impossible to do with html and css only. Could there be any workaround using java script?

I have tried it and all work as charm, you need rule for visited links too and set it as default unvisited link
Fiddle

What I understand from your requirement I credited a jsfiddle.
Please check the DEMO
http://jsfiddle.net/saorabhkr/Pzuwb/