Solved

Hover Gone

Posted on 2016-10-17
16
30 Views
Last Modified: 2016-10-24
I have a web page with styling on it and I was requested to not have the visited color of a submenu anchor change color.  I thought I did indeed make the update.  But now,  once a link is clicked,  that link no longer changes color on the hover.

Here is the HTML
<div class="container">
	<div class="HCPmenu-container">
		<div class="HCPitem">
			<a href="#">Corporate Comm.</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
						<a href="#" target="_blank">Memos</a>
						<a href="#" target="_blank">PressReleases</a>
						<a href="#" target="_blank">The Next Page</a>
						<a href="#" target="_blank">SomeCompany News</a>
					</div><!-- Close Column Div -->
					<div class="col_1 HCPsub-menu-item">
						<a href="#" target="_self">Corporate Information</a>
						<a href="#" target="_self">SomeCompany Gives Back</a>
						<a href="#" target="_self">Company History</a>
						<a href="#" target="_blank">The History of SomeCompany</a>
					</div><!-- Close Column Div -->
					<div class="col_2 HCPsub-menu-item">
						<a href="#" target="_self">Record Management</a>
						<a href="#" target="_self">Research and Reference Services</a>
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
		<div class="HCPitem">
			<a href="#">Human Resources</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
						<a href="#" target="_self">US Human Resources</a>
						<a href="#" target="_self">Canada Human Resources</a>
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
		<div class="HCPitem">
			<a href="#">IT</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
						<a href="#" target="_self">Policies and User Guides</a>
						<a href="#" target="_self">IT Security</a>
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
		<div class="HCPitem">
			<a href="#">Corporate Services</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
						<a href="#" target="_self">City1</a>
						<a href="#" target="_self">City1</a>
						<a href="#" target="_self">City1</a>
						<a href="#" target="_self">City1</a>
					</div><!-- Close Column Div -->
					<div class="col_1 HCPsub-menu-item">
						<a href="#" target="_self">Canada</a>
						<a href="#" target="_blank">Visitor's Registration</a>
						<a href="#" target="_blank">iOffice</a>
						<a href="#" target="_blank">Purchasing</a>
					</div><!-- Close Column Div -->
					<div class="col_2 HCPsub-menu-item">
						<a href="#" target="_self">Corporate Travel</a>
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
		<div class="HCPitem">
			<a href="#">Sales Connect</a>
				<div class="HCPsub-menu">
					<div class="col_0 HCPsub-menu-item">
					</div><!-- Close Column Div -->
				</div><!-- Close Sub Menu Div -->
		</div><!-- Close Item Div -->
	</div><!-- Close menu-container div -->
</div><!-- Close container div -->

Open in new window


And here is the CSS
<style type="text/css">
a , a:hover{
  text-decoration: none!important;
}

* {
  box-sizing: border-box;
}

.HCPmenu-container .HCPitem {
  float: left;
}

.HCPmenu-container .HCPitem > a {
  margin-top:-16px;
  padding-left:15px;
  padding-right:15px;
}

.HCPmenu-container .HCPitem > a {
  padding-top: 15px;  
  padding-bottom: 15px;
}

.HCPmenu-container:after {
  display: table;
  content: " ";
  clear: both;
}
.HCPitem:hover .HCPsub-menu {
  display: block;
  border-width:1px;
  border-color:green;
}
.HCPitem > a {
  color:black;
  display: block;
  height: 100%;
}
.HCPitem:hover > a {
  background: white;
  color:#0c7ff4;
}
.HCPsub-menu {
  background: #fff;
  display: none;
  position: absolute;
  padding-top: 3px;
  z-index: 10 !important;  
  box-shadow: 3px 3px 3px #d1d4d9;
}
.HCPsub-menu-item {
  float:left;
  padding:5px 25px 5px 5px; 
  height:auto;
  width:auto;
}
.HCPsub-menu-item a {
  display: block;
  margin-bottom:15px;
}

.HCPsub-menu-item > a:hover {
	color:#0c7ff4 !important;	
}

.HCPsub-menu-item > a:link {
	color:#a2a3a5;
}

.HCPsub-menu-item > a:visited {
	color:#a2a3a5 !important;
}

</style>

Open in new window



Thanks,
Howard
0
Comment
Question by:hbash
  • 8
  • 8
16 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41847342
The code you posted does not appear to replicate the problem.

Menu changes colour on hover - click does not go anywhere.

If something is changing on click then the new page that is loading does not have the amended style

Can you show us a live link?
0
 
LVL 1

Author Comment

by:hbash
ID: 41847540
https://plnkr.co/edit/KWjB6sqvXDDzlVRJ8ety

Select any of the first column of sub menu links.  It should just open in another tab.  After that,  check the clicked on link and note that it no longer changes color on the hover.  The rest of the unclicked on links do.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41847754
Still not seeing it.
I clicked on Corporate Comm / Memos
It opened another tab
Hover in both tabs still works
Tried in FF and Chrome
ss77a.jpgss77b.jpg
0
 
LVL 1

Author Comment

by:hbash
ID: 41848228
Try the sub menus.  Like click on the memos link see it open in another tab and then go back to the tab you clicked the memos link in and note it won't change color on the hover.

Important to look at the initial page, not the one opened in the new tab.
0
 
LVL 1

Author Comment

by:hbash
ID: 41848275
On line 71 of the CSS file,  I have the following:

.HCPsub-menu-item > a:visited {
      color:#a2a3a5 !important;
}

It is there to keep the clicked on submenu link from changing color after it is clicked which is a requirement.  That value is the non hovered on color.

However,  that instruction is what is disabling the hover effect after the click.  It doesn't make a lot of sense to me, but if I remove that statement, the link still has it's hover color change after it is clicked on but it has a visited color of a light blue.  I need to keep the color change for the hover and not on the visited link.

Here is the sub menu after clicking to of its links (I removed the offending CSS,  the hover works again, but the color changes:
Bad Visited Colors
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41848309
So you are referring to the sub-menu items hover?

I am trying to see the logic behind all the !important settings and why you are forcing the visited?

If I understand your requirement you want the menu item that is clicked to be highlighted?

Usual practice is to assign a class to the clicked menu item - either with JavaScript or when the page is rendered. The class then sets the selected colour.

I don't think the way you want to do it is going to work. Firstly, any link that is clicked will get that style - so as you go through the menu items each one of them will have been "visited" so will change colour - which I doubt is what you want.

My advice - do it the way that is currently done in the wild - assign a class to the selected menu item and style the class.
0
 
LVL 1

Author Comment

by:hbash
ID: 41848342
I am referring to the sub menu items hover.  That works unless I try to disable the visited color change on those links using the same color as their default before the click (non hovered).  

I do not want the visited item highlighted.  The color I specified for visited is the same color it had before the click caused the color change.  

Ideally I want to tell the sub menu item to not change color on the click and the only way I came up with is to tell it to have a visited color which is the same as it was before the click.

I know I use the important setting too much.  I will try to back out of that too.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41848356
I know I use the important setting too much.  I will try to back out of that too.
The main reason is that it has side effects that can be incredibly annoying to track down.

I still think the class option is the way to go.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:hbash
ID: 41848361
Not sure what you mean by the class option is the way to go.  The CSS is referencing the classes.  

My goal is to disable the clicked (aka visited setting) from changing the anchor's color which I hoped was a trivial requirement.  Disable the visited color change and leave all other settings intact.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41848382
Ok - I think I am with you - but in the plunker you setup - if you removed the visited style - I am not seeing the link change colour?

Usually if you give your a element a colour then that overrides the visited colour.

Can you post a link of an example where the link changes colour on visited?
0
 
LVL 1

Author Comment

by:hbash
ID: 41848392
I just ran it in plunker.  without removing that visited style, I clicked on the memos sub link under Corporate Comm. and it opened again in a new tab (let's call it tab 2).  When I go back to tab 1,  the memos sub link doesn't have a color change, but also the color change on the hover for memos no longer changes color.

The only other thing of note perhaps is the browser version, although the problem persists on the "real" system in chrome.  For plunker,  I am using IE11.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41848504
I am able to replicate that part - I am interested in a demo that shows the original problem you were trying to fix i.e. before you put the style in for visited - where the link changed colour after you clicked on it and you did not want it to.
0
 
LVL 1

Author Comment

by:hbash
ID: 41848560
Understood.  The best I can come up with at the moment is the picture I included above.  In Plunker, the color change without that fix behaves as required.  Something on the SharePoint page,  outside of my piece must be causing this behavior.

When I take the source in render it in Chrome, what I see is that the second tab get's added with the page and that memos link is colored blue.  However,  when I move my cursor on that sub menu, the blue goes away??? Odd.

Step 1
Step 1
Step 2
Step 2
Step 3
Step 3
Step 4
Step 4
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41848609
Ok but without seeing the actual problem can't really say what is causing it.

In my experience - I have never had a problem with visited colour. I set the colour on the <a> and that sorts it out - which is why I can't really give you a solution without seeing the problem.

Best I can suggest is to open the console - right click on the sub-menu link and then Inspect Element.

Not sure about IE - but in FF you have the option for forcing the hover style on an element - which allows you to examine the styles for the hover state.

What you can do is have a look on your site to see (in the hover state) what styles are setting the color - and then trace it from there.
0
 
LVL 1

Author Comment

by:hbash
ID: 41848695
This works in IE, but not in Chrome. Note the commented out and replaced styling below:
a , a:hover{
  text-decoration: none!important;
}
* {
  box-sizing: border-box;
}

.HCPmenu-container .HCPitem {
  float: left;
}

.HCPmenu-container .HCPitem > a {
  margin-top:-16px;
  padding-left:15px;
  padding-right:15px;
}
.HCPmenu-container .HCPitem > a {
  padding-top: 15px;  
  padding-bottom: 15px;
}

.HCPmenu-container:after {
  display: table;
  content: " ";
  clear: both;
}
.HCPitem:hover .HCPsub-menu {
  display: block;
  border-width:1px;
  border-color:green;
}
.HCPitem > a {
  color:white;
  display: block;
  height: 100%;
}
.HCPitem:hover > a {
  background: white;
  color:#0c7ff4;
}
.HCPsub-menu {
  background: #fff;
  display: none;
  position: absolute;
  padding-top: 3px;
  z-index: 10 !important;  
  box-shadow: 3px 3px 3px #d1d4d9;
}
.HCPsub-menu-item {
  float:left;
  padding:5px 25px 5px 5px; 
  height:auto;
  width:auto;
}
.HCPsub-menu-item a {
  display: block;
  margin-bottom:15px;
}

//.HCPsub-menu-item > a:hover {
//	color:#0c7ff2 !important;
//	color:#0c7ff4 !important;	
//}

//**** This works in IE and not in Chrome ****
.HCPsub-menu-item > a:hover, .HCPsub-menu-item > a:visited:hover  {
    color:#0c7ff4 !important;             
}

.HCPsub-menu-item > a:link {
	color:#a2a3a5;
}

.HCPsub-menu-item > a:visited {
	color:#a2a3a5 !important;
}

Open in new window

0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41849079
I am not clear on what this style sheet does. We have a couple of scenarios

1. The original problem where the menu without styling overrides was showing a different colour for links after you had clicked them a:visited was kicking in and messing with the styling

2. The second problem where you tried to fix the above by using !important and overriding the :visited style but it was not working as expected.

I need to see an example of #1 - if I understand you correctly though you say that it only manifests itself when part of the SharePoint site you are working on. If that is the case what does the CSS above do with respect to the problem at hand?

Did you try using F12 / Inspect Element to track down where the :visited style was being set in the SP site?
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now