I am having a problem related to hover pseudo not working. Problem is with Surface pad's chrome browser. Hover effect is working fine in rest of the browsers but not working in chrome. I am using surface pen to check the hover.
HTML:
<ul>
<li>link</li>
</ul>
CSS:
a:hover{cursor:pointer; background:red;}
You’ll need to make sure that your hover anchor has an href on it to make it touchable. You can do this with either href="#" or href="javascript:void" , then you need to add aria-haspopup="true" to tell the device that after the user releases the tap, whatever was visible should remain visible until another interaction.
Got it. Actually earlier i was having a problem on touch devices. Hover effects were working on touch and was not changing on untouch the area.Hover effect stick with the touch and didn't go back. so on touch devices i changed the :hover into :active.
Related
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
I have this simple code
<style>input:hover{border: 3px solid blue;}</style>
<input type="text">
Expected behavior: when I hover the mouse over the input, new style should appear in the devtools styles section, but it only appears when I force the hover state through the devtools(not with the mouse). As I can remember it should show styles in both cases, am I wrong? This happens both in chrome and firefox devtools, so I can't really understand what is happening, I use css for 3 years and I can't remember this problem.
I believe most dev tools used to show hover states, but now I don't think any do (without clicking). Probably because they added support for so many element states that if they showed them all it could become confusing.
Im look as much as possible to avoid having to use a JS solution for this. But if that is my only option to get this working then ill bite the bullet.
I have a slide out nav section that has a toggle button in it.. this nav section covers a topbar that has a corresponding toggle button in it..
they both have hover animations using CSS3 animations applied to the :hover attribute. My issue occurs because both toggle buttons align with one another.. so when the nav is opened and closed you do not need to move your cursor.. because of this the :hover event doesnt appear to be getting triggered on the new element that is under the cursor until you move your mouse..
However, on Firefox they do appear to get triggered
I have had a look at people having issues with this to do with jQuery hover events not firing: here
If anyone knows of a css or html way to do this i would be very greatful. My fiddle is here:
http://jsfiddle.net/Lm2fa/1/
EDIT:to test this please click on the open/close menu button (top left hamburger) then without moving your mouse click the button again to close the nav.. you shoul only experience the :hover event when you click or move your mouse
EDIT:this seems to definitely be occurring on OSX Chrome, OSX Safari (havent got a PC to test with)
I have some nav elements positioned with transform: rotate() and box-shadow. When you hover them they 'pop out' a little bit to indicate you can click on them. In Chrome and Safari (indicating this is a webkit issue) when you hover some of the nav items the box shadows go haywire and cover up portions of other random elements. It works fine in Firefox.
I made a jsfiddle portraying the issue as simply as I could figure out how to:
http://jsfiddle.net/Q39eJ/1/
Hover over and then out of the first one or 2 elements and you'll see the issue in action.
The site I'm working on has the issue here:
http://temp.go-for-english.com/
(URL will soon change to http://www.go-for-english.com if this one doesn't work)
If anyone can figure out a work-around that still utilizes CSS3 to make it look normal (Maybe set the z-index again on the hovers, or some other weird workaround that I'm not sure about) I'd greatly appreciate it :) I'd really rather not resort to images :(
UPDATE:
I've been informed it looks fine on Windows Chrome =\ I'm using Mac OSX 10.6, here's a screenshot of the behavior I see:
http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png
My client has also pointed out the issue because they use Safari.
I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? related to forcing a repaint of elements using javascript. So I updated my fiddle with this code to force a repaint of the elements with box shadows:
$(function() {
$('.top-nav a').hover(function() {
redrawMe($('.top-nav a'));
})
});
function redrawMe(obj) {
obj.hide();
obj.each(function() {
this.offsetHeight;
});
obj.show();
}
I tried only redrawing the element that was being hovered redrawMe($(this)); but it didn't work, when any of them gets hovered, I need to redraw all of them. Appears to mostly do the trick but there's still some darker shadows that appear in the cracks between each element. I feel that this is acceptable and barely noticeable. jsfiddle with my proof of concept:
http://jsfiddle.net/nzifnab/Q39eJ/4/
Haven't updated that live site with it yet, but shall soon.
If anyone can manage to find a way to make even the shadows between each element disappear I'll accept your answer instead :)
Again, this may only be happening on MacOS X in both chrome, and safari.
this problem has had me stumped all day. I'm using Firefox 8 and I have a UL element that's located inside a div tag, the div tag is animated with the jQuery UI Accordion widget as the following markup shows:
<div id="accordion">
<a class="ui-accordion-header">Section 1</a>
<ul style="width: 250px !important;">
<li>
<dl id="MyDefinitionList"></dl>
</li>
</ul>
</div>
My problem is that in Firefox the inline width style for the tag gets overwritten and reset to 0px. So the above ends up getting rendered in Firefox as follows:
<div id="accordion">
<a class="ui-accordion-header">Section 1</a>
<ul style="width: 0px;">
<li>
<dl id="MyDefinitionList"></dl>
</li>
</ul>
</div>
This does not happen in Chrome or IE and I have no idea what is causing this in FF. Ideally I would like to set the width dynamically from jQuery, I tried .width(250) and .css("width", "250px") but neither has any effect, I had just set it inline in the example above to test and sure enough it gets overwritten and reset back to 0px. Is there some browser setting or feature in the Firefox rendering engine that causes this behavior. I also tried checking the styles in the jQuery UI CSS, but didn't see anything that defined the width as 0px. Any help is appreciated as we are currently trying to get this web app pushed out and it must be cross-browser compatible. Thanks.
UPDATE:
One thing I forgot to mention this snippet is part of a dynamic Javascript menu system. I don't think I can replicate it on jsFiddle in it's entirety. I'm wondering if the menu generation has anything to do with it? Although there's nothing in the menu code or CSS that specifies a width of 0px. Nor does it explain why this happens in Firefox and not IE or Chrome.
UPDATE 2
Here are some snapshots from Chrome compared to Firefox
Note in Chrome the width I calculate dynamically using jquery is applied to the element.style property as expected.
But in Firefox, the element.style is reset to 0px upon page render.
Css also follow the inheritence.. some css properties are inherited from parent controls css.
as like from body tag and other parents..
use FireBug to check all of this for cross browser issues and better UI design. I am attaching an image that showing such inhertence.
hope you will get the idea about this..
if you want to give preference to some css property must not effected by parent inherited properties then use !important with them.
e.g.
a{ display: block !important; }
may be you will get little idea from this..
if you are adding stuff at run time then observer the changes in firbug and correct the GUI according your requirements and then use .addCss() on the place of .css().
api.jquery.com/addClass/