0

I have the following Demo which works beautifully on my desktop. I hover the circle and it expands - yay!

However, the circle doesn't expand when tapping it on my iPad.

Is it possible to use some jQuery to "trigger" the expand on a single click on my tablet?

I am fairly new to jQuery so a little unsure where to begin. I'd rather not replace the <div> with an <a> hyperlink tag as in time I'll be adding hyperlinks inside the circle.

Would really appreciate help with this. Here is a copy of my CSS & HTML for reference:

CSS:

.containMe {
    position:absolute;
    top:5px;
    left: 0px;
    z-index:5
}

.containMe {
    width: 147px; 
    height: 147px;
    position: relative;
    margin: 40px;
}

.circle {
    width: 147px; 
    height: 147px;
    margin: 0;
    display: block;
    position: relative;
    overflow: hidden;

    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

    .containMe:hover .circle {
        width: 285px; 
        height: 285px;

        -webkit-border-radius: 150px;
        -moz-border-radius: 150px;
        border-radius: 150px;
    }

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

<div class="containMe">
  <div class="circle" style="background-color:#15c3a8">
    <p>Text</p>
  </div>
</div>

</body>
</html>

Many thanks for any help with this.

4

1 回答 1

1

用CSS

selector:active { 
    /* gives css to an active element */
    /* so you could start in example webkit keyframes */ 
}

可以工作，但更容易的是用 js 或 jquery 处理这个！

使用 jQuery，您只需将点击事件绑定到所需的元素

$('.circle').on('touchstart',function(e){
   console.log(e); // e contains all needed information from your touch event
});

好吧，有时你想为移动和桌面生成一个页面，所以你需要一些东西来改变你正在观看的本机 js 事件名称。
你可以做类似的事情（但你应该证明这第一行代码，我只是测试它在 Apple 设备和台式机上） 

var touch=/Android|BlackBerry|iPhone|iPad|iPod|IEMobile/i.test(navigator.userAgent);
var multitouch=/iPod|iPhone|iPad/i.test(navigator.userAgent);
var ev= {
    down: !touch ? "mousedown" : "touchstart",
    keydown: !touch ? "keydown" : "keydown",
    move: !touch ? "mousemove" : "touchmove",
    up: !touch ? "mouseup" : "touchend",
    click: !touch ? "click" : "touchstart"
};

因此您可以访问 eventListener 而不必担心不同的事件名称。不要编码两次！^^ 你会用像这样的变量来做这个。

var elm=document.getElementById('idelement');
elm.addEventListener( ev.down, function(e){
    // console.log(e.target);
}, false);

//or in jQuery, depending on your given classname  
$('.circle').on(ev.down, function(e){
    /* do nice stuff with e.target or $(this) */
});

你也可以用gesturechange事件做一些好事，但要小心这种事件类型，它并非在所有地方都实现相同。

于 2013-05-05T15:40:51.240 回答