After too many hours of frustration spent not understanding what was happening, a random idea to test seems to have confirmed the issue, but no idea how to properly resolve, and I'm truly not certain if this is a wordpress, css or even a theme caused issue (Avada theme). So a quick explanation:
Wordpress, Avada theme. Everything updated and patched. There is a menu on the site. There is a basic white color for the text, and hovering over a menu item changes the text color to orange and adds a border to the top and bottom. Nothing crazy. Just a little "animation" by setting a base state for the menu items (text white, background transparent, no border), and setting some different parameters for when it's hovered/active. I actually set the options in the avada builder, but also confirmed what was being applied with chrome dev tools. While in the builder back end after setting this, it works flawlessly. Hovering a menu item triggers the transition and moving off returns it to original state. If I visit the page normally however, all the menu items are already displaying and stuck in their hover state. From first moment it's visible it's already like that, and all the menu items are the same as if they were all being hovered. Hovering, clicking etc doesn't change the state. It acts like the hover/active properties are always active. Even trying to force change the element state in chrome dev tools doesn't change anything. If I go back into the live edit mode (which is still rendering the site as well), it's functioning perfectly.
I couldn't find much of anything hunting the forums. But a lucky break....I noticed that all the links in the menu were of anchor link variety. The kind that has ...com/#xxxxx in the url where clicking on it scrolls to a section or part of the same page instead of taking you to a unique page. The site was set as a one page. Using the avada Wedding demo site as a starting point. So I tested replacing a menu item with an anchor link url with any other link without the #xxxxx . Suddenly, it works perfectly again. Any of the anchor link items will still be stuck in that hover state appearence, but any item not using an anchor link looks and works fine even when the menu is a mix of both.
So the dillema. The page is all on one page, so the menu items need to use the anchor style. I'm not certain why anchor link seems to be be stuck on hover/active. I had wondered if it's just technically always active by the way it works which would explain this. Any thoughts?
Menu items with anchor link urls don't change between regular or hover/active state
Related
I have a website where all links are working normally in the major browsers except Safari. In Safari, if the user clicks on a link with target="_blank" and then goes back to the original tab, the link is no longer styled as a link. If you then close the newly opened tab, the link immediately updates to being styled.
That is:
In my site at https://mysite.umich.edu/myapp I have a link in this format:
Accept Role in our Glossary of Terms
On the page, it looks like this:
When I click on that link, the linked-to URL (the glossary) opens up in a new tab, and I am taken to that tab. If I then go back to the tab where I started (https://mysite.umich.edu/myapp), the link is no longer styled as a link:
If then, staying on the original page, I close the newly opened tab (the one showing the glossary), the link will immediately go back to looking like the first screenshot above.
Debugging this is made more complicated by the fact that the problem doesn't happen if Developer Tools are open. Also, some sequence of clicks will make the problem go away, but I have not yet been able to reproduce that effect.
It seems like this must be some sort of timing issue in Safari. Does anyone have any clues about how to fix it?
There does seem to be some sort of timing issue with Safari whereby it holds on to the CSS for A:HOVER in the original tab even after the user has moved the cursor away from the link, but this would not have been a problem if we had had a reasonable CSS rule for A:HOVER. Since our A:HOVER CSS rule set the text color to the same color as our default text, we could not, of course, distinguish the link from the surrounding text. Changing the CSS made this a non-issue.
So it seems like Safari is misbehaving, but in our situation, at least, there is a workaround.
So currently here: http://pixphoriad.haneuri.net/header.php
I have a link hover effect on the top five links that I snagged online somewhere.
What I want to do is add a smooth css drop down menu from the "Resources" link but when I tried to play with it, nothing worked. I don't understand a whole lot that's going on with that current code in regards to that hover, and I'd like the link hover to stay the same, just have a drop down menu with links when hovered over.
I am currently working on a online resume website, and I am experiencing an odd issue with meteor.
CSS styling for certain elements on the page will work, and not work at the same time. What I mean is say you load the site and land on skillset you will see a white background behind the text and grey words. Now if you navigate to another page and come back all you will see are the stars and H2 tags the background has become transparent. However if you open your Developer console the background will magically come back.
Now example 2, with the Developer console already open repeat the process above. Open Skillset, navigate away, and go back to skillset. Now you will see the CSS styling is there, mess with the background for the class '.skillset' and you will see that the background is back. Isnt this odd?
My site is http://patrickml.com/
For some reason I needed to add "position: relative" to my main container. I do not understand why, but it did fix my issue.
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I have created a CSS dropdown menu using suckerfish. The problem with it is when you click the top level nav item that takes you to category pages, the pointer is still over that nav item and the dropdown appears automatically in IE.
Its fine for Firefox as the dropdown will not appear until I move the mouse, however IE just kicks in straight away without any mouse movement at all.
As the menus are quite large the user is unaware that the page has changed underneeth.
This site http://www.foodnetwork.com/ seems to achieve what I want, with a slight delay before the dropdown appears again. I know they are mixing it up with JS and CSS, but cant quite work out what they are doing.
Any thoughts
I know you are currently using a different technological solution to this problem, but please at least take a look at my suggestion before you judge it. I'm not good enough to explain it outright, so I'll just give you a couple of bullet points and then link to the solution in an effort to assist you.
This solution contains these attributes:
No client-side scripting of any sort (Javascript) was used
Absolute browser and platform compatibility
Text scaling friendly
Narrow window width handling
Functional for non-CSS, or CSS-disabled, browser
Placed into the Public Domain
The site where the file is posted uses this menu (it's owned by the writer). So, please visit this GRC's Script-Free Pure-CSS Menuing System page.
I really hope this helps you!!
Use jQuery's hoverIntent to achieve that delayed effect. In addition, the menu stays there even if the cursor momentarily moves out of the menu. Prevents that distracting flicker effect of menus appearing and disappearing.
Just throwing this out there, since there may be other changes you wish the menu had as well:
You may want to consider Superfish (an updated/upgraded [and possibly overkill so take a look] version of Suckerfish), one of the additions is the delay option on the menus.
So I got the solution for this.
I added the CSS with JS in the head of the document and set a small delay on it. This way when the user clicks the main nav link the dropdown is hidden by default with the CSS and then made to reveal with the CSS that is written in with JS. The user sees a page without the drodown on page load, and then after 1.5 secs the dropdown appears, therefore showing the user the page reloaded.
// Add dropdown styles
function addDDStyles() {
var head = document.getElementsByTagName('head')[0];
var logindiv = document.createElement('link');
logindiv.setAttribute('type', 'text/css')
logindiv.setAttribute("rel", "stylesheet");
logindiv.setAttribute("href", 'http://files.stv.claw/css/dropdown.css');
logindiv.setAttribute("media", "screen");
head.appendChild(logindiv);
}
setTimeout('addDDStyles()', 1500)