We Keep Coding

How can I ensure css hover state is active when an element is revealed below the cursor?

When a div containing links with a hover property is changed from display:none to display:block, if the mouse pointer is over the links, the hover state is not triggered until the pointer is moved.
Is there a way in javascript to either trigger the hover state or force it to be evaluated when the div is revealed.
To explain the context, I am attempting to implement an early Macintosh dropdown list interface style that involves revealing the list options on top of the drop down list when the list box is clicked on.
When I click on the dropdown div, the dropdown-content is displayed but the top item is not highlighted until you move the mouse.
function openMenu(mybutton) {
var els = document.getElementsByClassName("dropdown-content");
var els1 = document.getElementsByClassName("dropdown");
for(var i = 0; i < els1.length; i++) { // Step through all dropdown elements
if (els1[i] === mybutton) {
els[i].classList.toggle("show");
}
}
}
.dropdownContainer {
border: 1px black solid;
position:relative;
width:150px;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position:absolute;
top:-1px;
left:-1px;
width:150px;
background-color: white;
min-width: 120px;
white-space: nowrap;
z-index: 1;
border: 1px #000 solid;
border-bottom-width: 1px;
}
.dropdown-content a {
float:none;
color: black;
padding: 4px 10px 4px 15px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover, .dropdown-content a:focus {
background-color: black;
color: white;
}
.show {
display: block;
}
<div class="dropdownContainer">
<div onclick='openMenu(this);' class="dropdown">
All Categories
</div>
<div class="dropdown-content">
All Categories
Boards
Cables
Memory
</div>
</div>
I was able to make the first line initially highlight by changing the focus to the first link when the dropdown-content is opened but the problem was then that the the first link stayed highlighted when you moved the mouse over the other links.

How do I highlight a HTML button using CSS?

I am trying to highlight the "current page" in my navigation menu (with drop-down menus).
The code below did the job when I had simple navigation links (built using the "< a >" HTML tag). I am now upgrading my navigation bar to hold drop-down menus (using "< button >" HTML tags).
I believe I need to take a similar approach and assign an active class to the "current" page but I can't work out how to loop through "< button >" objects in the same way I did for "< a >" objects
How can I dynamically highlight the current page in my navigation bar when using buttons ("< button >") in my navigation bar?
I found a related article on W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element2 but it doesn't work for my use-case as I'm navigating between different URLs.
A simplified version of my code looks like this:
<div class="navigation">
Home
Page A
<div class="dropdown">
<button class="dropbtn" onclick="location.href='page_b.html'" type="button"> Page B</button>
<div class="dropdown-content">
Food
Exercise
Drinks
</div>
</div>
Page C
Page D
</div>
<!-- Highlight current page (works for <a> but not <button>)-->
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active');
$(this).parents('li').addClass('active');
}
});
});
</script>
Associated CSS:
...
.active {
background-color: blue;
}
...
.dropdown:not(.dropdown-content) {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
padding: 14px 16px;
margin: 0;
}
...
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #ffffff;
background-color: #000000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content{
display: block;
z-index: 1;
}

You would need to add the class active to each page so the when the user is on the home page. your code would be like this.
<a class='active' href="index.html">Home</a>
For page A
<a class='active' href="page_a.html">Page A</a>

populate a drop down menu list

I have the following [fiddle][1]. I am trying to achieve two things & I have fallen at the first hurdle.
I want to have a drop down menu that when hovered over display a list of regions. The hover over part works however none of the regions are listed. I think its to do with the code below. However I'm not sure what is wrong? In my actual project I use an AJAX call to populate the menu but would like to know what is wrong with the code below?
The end goal is where one of the regions is clicked on a javascript function will be called
$(document).ready(function () {
var $region = $('#regionList');
$region.append('<li><a>Europe</a></li>');
$region.append('<li><a>Japan</a></li>');
$region.append('<li><a>North America</a></li>');
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4C66E9;}
<div class="dropdown">
<button class="dropbtn">Regions</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>

jQuery is not defined, you'll need to include jQuery if you want to use $.
$ is not defined
http://jsfiddle.net/d2v7fLpj/

Trying to style a Sidebar Widget Navigation with JQuery

For the navigational items which have a submenu, for example, 'Primary Fees', I have included an arrow. Now when I hover over the Main Menu Item, I have included an animation which rotates the arrow and highlights the Main Menu item with red. In order to rotate the arrow, I added a .rotateOnHover class to all the Main Menu Items which have the arrow. then I use CSS to perform the rotation animation.
Now to the problem. When I hover over the submenu Items, I want to keep that particular Main Menu item highlighted and keep the arrow rotated. For example, when I hover over 'Grade 1-3 Boarding', I want to keep 'Primary Fees' highlighted and I want to keep the arrow rotated. I did some searching on the interwebs, and in particular StackOverflow, and I was encouraged to use Jquery to achieve this task. Since this is in essence, hovering over a child element and changing the style of its parent element.
The problem is when I hover over the submenu items e.g. 'Grade 1-3 Boarding', it applies the rotating arrow animation to ALL the main menu items which have the same arrow and arrow class, .rotateOnHover.
How can I hover over a submenu item and apply my desired hover effects to its parent Menu Item Only and not all the menu items?
Any help will be appreciated.
Also, any styling tips for the sidebar and the website, in general, will be appreciated. This is my very first website and I'm learning on the job.
This is the code for the sidebar
HTML
<div class="sidebar-widget">
<div class="sidebarExplore">
<h4>
<span style="color: grey; text-align: center; margin:auto; display:block; font-size: 25px;">
<i class="fa fa-globe" aria-hidden="true"></i> Explore This Section</span>
</h4>
</div>
<ul class="sidebarExploreList">
<li class="dropdownsidebaritem">
Primary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i>
<div class="sidebarExploreSubmenu" style="font-size: 12px;">
Grade 1 - 3 - Boarding
Grade 4 - 7 - Boarding
Other Costs - Boarding
Reception - Day School
Grade 1 - 3 - Day School
Grade 4 - 7 - Day School
Other Costs - Day School
</div>
</li>
<li class="dropdownsidebaritem">Secondary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i></li>
<li>Admission Forms</li>
<li>School Fee Policy</li>
</ul>
</div>
CSS
.sidebar-widget {
border:1px solid #afb1b3;
margin-top: 13.8%;
margin-right: 5%;
overflow: hidden;
background-color: #f3f3f3;
float: right;
width: 20%;
height: auto;
}
.sidebar-widget ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-widget ul li {
list-style-type: none;
width: 100%;
border-top: 1px solid black;
}
.sidebar-widget ul li:last-child{
list-style-type: none;
width: 100%;
border-bottom: 1px solid black;
}
.sidebar-widget ul li a{
display: block;
position: relative;
text-decoration: none;
text-align: center;
padding: 20px;
font-size: 18px;
font-weight: 100;
text-rendering: optimizeLegibility;
}
.sidebarExploreSubmenu{
display: none;
position: relative;
color: black;
background-color:white;
font-size: 11px;
border-bottom: 0.5px solid bisque;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.sidebarExploreSubmenu a{
padding: 10px;
text-decoration: none;
display: block;
text-align: center;
font-size: 10px;
}
.rotateOnHover {
font-size:18px;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sidebar-widget a:hover {
background-color: #990000;
color: white;
}
.dropdownsidebaritem a:hover .rotateOnHover {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.sidebarExploreSubmenu a:hover{
font-size: 10px;
}
JS
<script type="text/javascript">
$(document).ready(function() {
$( '.dropdownsidebaritem' ).hover(
function(){
$(this).children('.sidebarExploreSubmenu')
.delay(100)
.slideDown(500);
},
function(){
$(this).children('.sidebarExploreSubmenu')
.clearQueue()
.slideUp(500);
}
);
});
$(function() {
$('.sidebarExploreSubmenu a').hover(function() {
$('.rotateOnHover').css('transform', 'rotate(180deg)');
}, function() {
// on mouseout, reset the transform
$('.rotateOnHover').css('transform', '');
});
});
</script>

First of all don't style inline elements, example:
Grade 4 - 7 - Day School
instead make it like that:
Grade 4 - 7 - Day School
and then in style.css add:
.sidebarExploreSubmenu-anchor {
font-size: 15px; font-weight:bold; padding: 5px; }
It can make your website messy. Try to do everything in style.css, remember that there're levels in which browser are reading styles, example:
!important > inline styles > #style .style .style > .style .style > .style

Why isn't the div coloring the full height?

Edit: Plunker preview here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview
Probably a terrible title but after a minute I haven't been able to come up with better.
I have created a simple page with angularjs and some html. The issue I'm having is actually with css. When you click on a menu item, it highlights the block, but I'm getting a weird 1-2 px border that isn't highlighted along the bottom.
Been at this for hours and seriously going up the wall with it...
My html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />
<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
<!-- The navigation menu will get the value of the "active" variable as a class.
The $event.preventDefault() stops the page from jumping when a link is clicked. -->
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
</div>
<!-- ng-show will show an element if the value in the quotes is truthful,
while ng-hide does the opposite. Because the active variable is not set
initially, this will cause the first paragraph to be visible. -->
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
fd
</body>
</html>
My css:
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
}
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
margin-bottom:45px;
line-height: normal;
}
#title {
display:inline-block;
padding: 18px 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
/*-------------------------
The menu
--------------------------*/
nav{
display:inline-block;
border-radius:2px;
}
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 18px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
nav a:first-child{
border-radius:2px 0 0 2px;
}
nav a:last-child{
border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
p{
font-size:22px;
font-weight:bold;
color:#7d9098;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}

You can try to add on your a tags the following css
line-height: 60px;/*height of your header*/
padding: 0px 30px;/*remove the top and bottom padding*/
hope it will help you

Update the below css values with:
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 22px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}

Your titles padding is the problem
This will work:
#title {
display: inline-block;
padding: 14px 200px;
color: #fff;
font-weight: bold;
font-size: 18px;
}

Update your css style of nav > a with this:
nav a {
color: #fff;
display: inline-block;
padding: 23px 30px 19px;
text-decoration: none !important;
text-transform: uppercase;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
transition: background-color 0.25s;
}
Otherwise you can set a custom height to the a.

Trying to adjust the size of the elements by using padding can be tricky. In this case it is better that the size is determined by the content of the elements. I propose the following changes:
First remove the padding of #tittle and instead add the desired positioning.
#title {
display:inline-block;
position: relative;
top: 18px;
left: 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
For the height of #header match the height of the child elements, we must include an element with style clear: both. This is so because #nav has float: right and the floats algorithm will extract the box from the normal flow. (reference: Visual formatting model )
HTML:
<div id="header">
<div id="title">...</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav>
<div class="clear"></div>
...
</div>
CSS:
.clear {
clear: both;
}
Finally, the elements contained in #header that we do not want in the normal flow are include in a div with the style float: left.
I updated your example:
http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview
I hope this helps.

When you use floats, you need to add a "clear" style to clear the floats:
<br style="clear:both" />
This is because anything inside of a div that's floated does not take space inside the div. The clear float CSS instructs the DIV to ensure that it encloses its floated children.
For example:
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
<br style="clear:both" />
</div>
You also have to remove the margin-bottom CSS style for your header.
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
line-height: normal;
}
Demo Plunker

Change the padding of nav a to
nav a {
padding: 21.5px 30px;
}