Currently testing mobile site on iOS (will get to other devices soon, so unsure if this pertains to other OS's/Browser).
How come mobile safari triggers the active state of a link during scroll?
My test page is constructed of an unordered list with a link tag inside each list item that expands to 100% width. The issue is that during a normal scroll, the :active state is triggered, revealing the background that is intended for showing during :active state only (I'm obviously omitting unnecessary styles and content from the example):
html:
<ul id="foo"><li>Content</li></ul>
css:
#foo a {background:white; width:100%; height:100px;}
#foo a:active {background:red;}
You can tell if a click turns into a drag gesture or not by listening to touchstart and touchmove events and then evaluate if the touch turns into a scroll or not e.g. if you were coding in angular
let isTouchMove = false;
#HostListener('window:touchmove', ['$event'])
onTouchMove(event) {
isTouchMove = true;
}
#HostListener('window:touchstart', ['$event'])
onTouchStart(event) {
isTouchMove = false;
}
you can add a class, e.g. 'not-scrolling', based on the value of isTouchMove variable and use that in addition to your :active selector, like :active.not-scrolling { background:red; }.
You should use ontouchstart/ontouchend to add/remove a class with Javascript. Then use that class instead of :active.
Related
How do I achieve something like this:
*:hover{
background-color:lightblue;
}
I am trying to change background color of any element on the page when hovering on the element. Not sure why it doesnt work.
It works fine http://jsfiddle.net/mendesjuan/9pta8vbz/
The problem is that it's highlighting the entire body since the mouse is over the body, so you don't see highlighting on children any differently.
The following example should clarify it http://jsfiddle.net/mendesjuan/9pta8vbz/1/ It will highlight items inside the body
CSS
body *:hover{
background-color:lightblue;
}
HTML
<p>1 <span>inside</span></p><p>2</p><p>3</p>
It will highlight the paragraphs, but the span will behave the same way since the paragraph will also be highlighted
What you are doing cannot be done with CSS alone, you can use JS to add a CSS class to the element that the mouse is over http://jsfiddle.net/mendesjuan/9pta8vbz/2/
CSS
.highlight {
background-color:lightblue;
}
JavaScript
// This is a simplified version that doesn't take care of edge cases
// known bugs: should use addEventListener, should not wipe out existing `className`,
// e.target is not 100% cross browser, but those are other topics
document.onmouseover = function(e) {
e.target.className = 'highlight';
}
document.onmouseout = function(e) {
e.target.className = '';
}
I'm having a similar problem as described in this question, but with JQuery Mobile 1.4, particularly with the list views. A slight tap that is not enough to be considered a click causes list elements to highlight and stay highlighted:
Can anyone tell me how I can prevent any hover highlighting in my application? I would rather not have to modify any of the JQM theming CSS to do this, but I will if that is what it takes.
It looks like maybe there is a jquery hover event or mouseover being triggered to set the interaction state to something like ".ui-state-hover" or ".state-hover"
1.
jQueryUI - removing class on hover
2.
function overPrevent(e){
e.preventDefault();
return false;
}
$(".options li").hover(overPrevent,outOption);
// alternative to above but still using JavaScript
$(".options li").click(function() {
$(this).removeClass("ui-state-focus ui-state-hover");
}
// alternative to above but still using JavaScript
$(".options li").hover(function(e){
$(this).removeClass("ui-state-hover");
});
OR maybe unbind to the mouseenter and mouseleave?
3.
$('.options li').click(function(){
$(this).unbind("mouseenter mouseleave");
})
OR try a pure css override
4.
.theme-group-header .state-default .corner-all .state-hover:hover{
background:none;
}
also detecting mobile up front with something like this small library - http://detectmobilebrowsers.com/
then you can name space your css and override the jquery ui library with something roughly like this:
.touch{
.theme-group-header .state-default .corner-all .state-hover:hover{
background:none;
}
}
see also references:
http://trentwalton.com/2010/07/05/non-hover/
jQueryUI - removing class on hover
http://tech.vg.no/2013/04/10/hover-state-on-touch-devices/
The issue with the "ui-state-hover" effect
Jquery hover function and click through on tablet
jQuery UI button not "unclicking"
http://api.jqueryui.com/theming/css-framework/
mobile safari links retains focus after touch
http://detectmobilebrowsers.com/
https://github.com/kof/remove-hover
To prevent any hover highlighting in a jQuery Mobile 1.4 Listview you can overwrite the appropriate CSS according to the swatch you're using:
/* Button hover */
#yourList.ui-group-theme-a .ui-btn:hover {
background-color: #f6f6f6 /*{a-bhover-background-color}*/;
}
/* Button down */
#yourList.ui-group-theme-a .ui-btn:active {
background-color: #e8e8e8 /*{a-bdown-background-color}*/;
}
My CSS has to change using a transition ,and till now i used div:hover for that.
The transition needs to be activated when you click another div, not when you hover over the div that has to move/change .
How can I do that ?
Thanks
Evert
You cannot handle click events on dom elements with css, you will need to use javascript for this.
You can add a click event to the first div which is fired when you click it. Within the event you select the other div, and make the transition.
Working Demo
You can do this by adding a class with the css transition:
Html:
<div id="clickme">1</div>
<div id="changeMe">2</div>
Javascript:
var el = document.getElementById('clickme');
el.onclick = function() {
document.getElementById('changeMe').className = "transition";
};
CSS:
.transition{
/* transition css */
}
I was wondering how I could set up css pseudo classes, specifically hover so when I hover over an element, like a div with an id, the properties of a different div with an id get changed?
so normally it would be this:
#3dstack:hover {
listed properties
}
I'm not sure what the change would be to have it hover on div with the id 3dstack and have it change another div.
I do not think that is possible unless the element you want to change the properties of is a descendent or a sibling of the hovered element, in which case you can do:
#myElement:hover #myElementDescendent {
background-color: blue;
}
/*or*/
#myElement:hover + #myElementSibling {
background-color: blue;
}
Of course you can always use jquery to do this:
$("#anelement").hover(
function() {
$("otherelement").css("background-color", "blue");
});
See the differences here
This is not possible with CSS alone. You'll have to use a JavaScript event handler. For example, with jQuery's hover:
$('#3dstack').hover(function() {
$('#otherID').toggleClass('properties');
});
DEMO
Visually you can do this using LESS, but under the hood it's actually using JavaScript.
I've made a button that expands horizontally: http://jsfiddle.net/timkl/TsDud/
However I'm having a hard time getting my button's hover-state to work properly.
This is my markup:
<a class="action-button" href="#"><span>Some text</span></a>
I don't know how to style the hover-effect so that the entire button is "lit" when the user hovers over a part of the button that isn't covered by the <span>.
This is what I get when I hover over a part of the button that isn't covered by the <span>:
Check out my example here: http://jsfiddle.net/timkl/TsDud/
jsFiddle DEMO HERE
Change the last lines to:
a.action-button:hover > span
Ex:
a.action-button:hover > span{
background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left-hover.png) no-repeat;
color: white;
}
And as I said in the comment above try to avoid to use separate images for your button states.
Use only one image and for ex. on hover just 'change' the background-position to the part of image representing the state you want!
It will save you the "button disappearance" until the new image is loaded.
You could change the hover rule to only be for a.action-button At present you have the style rule for both a.action-button and its span.
a.action-button:hover { ...
and
a.action-button span:hover { ....
Instead try applying it this way:
a.action-button:hover { ...
and
a.action-button:hover span { ...
won't work on some older version of IE however.
http://jsfiddle.net/HZpDL/