Hover effects using CSS3 touch events

后端未结

关注

 3  2014

I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.

Basically, the first to

相关标签:

3条回答

终归单人心

2020-12-02 05:34

If anyone is still having this issue in 2020 and beyond this article helped me.

My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)

0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2020-12-02 05:55
If you don't want to modify your HTML code, you could try this:
```
<script>
  document.body.addEventListener('touchstart',function(){},false);
</script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
自闭症患者

2020-12-02 05:56
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.

The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)
```
<style>
.boxbutton:active{
    -webkit-transform:scale(0.9); 
    -moz-transform:scale(0.9); 
    -ms-transform:scale(0.9); 
    -o-transform:scale(0.9); 
    transform:scale(0.9); 
    -webkit-box-shadow:0px 0px 20px #FFF; 
    -moz-box-shadow:0px 0px 20px #FFF; 
    -o-box-shadow:0px 0px 20px #FFF; 
    box-shadow:0px 0px 20px #FFF; 
}
</style>


<body ontouchstart="">
    <a href="#teamdiv">
        <div class="boxbutton" id="teambb">
            <h5>Team</h5>
        </div>
    </a>
</body>
```
The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful

EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this
```
<a href="#teamdiv">
    <div class="boxbutton" id="teambb">
    <h5>Team</h5>
  </div></a>
```
EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.
0 讨论(0)
发布评论:

提交评论
- 加载中...