Solved

Hover Gone

Posted on 2016-10-17
16
43 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:Howard Bash
  • 8
  • 8
16 Comments
 
LVL 54

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:Howard Bash
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 54

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
VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

 
LVL 1

Author Comment

by:Howard Bash
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:Howard Bash
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 54

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:Howard Bash
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 54

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
 
LVL 1

Author Comment

by:Howard Bash
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 54

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:Howard Bash
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 54

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:Howard Bash
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 54

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:Howard Bash
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 54

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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

822 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