當用戶在手機上觸摸屏幕時，如何添加css/jQuery過渡效果？

關閉手機並轉到此網站：http://www.mcbsfarm.com/當用戶在手機上觸摸屏幕時，如何添加css/jQuery過渡效果？

如果向下滾動，只需觸摸四個框中的任意一個，就會從灰色變爲藍色。

它不僅僅是一個元素：懸停的答案。真的看看這些盒子是如何激活的，尤其是當向下滾動時。長按盒子將激活顏色變化，而不會將用戶發送到後面的鏈接。我如何使用CSS或jQuery做到這一點？

謝謝！

2014-03-02 straubcreative

在CSS中它被稱爲：hover和觸摸屏手機，將它作爲觸摸而不是焦點處理。

你可以試試這個：

element:hover { // on hover 
    background-color: blue; 
}

在jQuery中這將是一個事件爲：

$('selector').hover(function() { // on hover!! 
    $(this).css('background-color', 'blue'); // change the css 
}

使用API，你可以發現一些變化;事件，然後根據事件和元素運行代碼。您可以在CSS中設置元素的樣式，因爲CSS只是用於樣式目的，但在jQuery中，您可以更改其他元素的CSS屬性，也可以執行更多功能，例如ajax請求。

在向前邁進之前，您確實需要學習CSS和jQuery的API！

的jQuery：http://www.jquery.com

CSS：https://developer.mozilla.org/en-US/learn/css

祝你好運！

來源

2014-03-02 07:42:59

感謝您的輸入，但它不是純粹的元素：懸停效果。它僅通過觸摸激活，而用戶滾動等，而不實際激活它們後面的鏈接。 – straubcreative

是的，觸摸手柄懸停效果。我試過了你提供的鏈接，我發現這個風格的代碼在檢查器中是'：hover'。懸停是當用戶將鼠標放在元素上時... –

請在移動設備上查看此內容，並在向下滾動時觸摸這些框。這不一樣。我是一名高級前端程序員，知道懸停影響是0_0。花了大約一個小時的時間，通過chrome開發工具瀏覽並搜索stack + google，瞭解這是什麼類型的轉換。我只能猜測它是CSS3或jQuery函數，因爲它僅通過觸摸激活，而不實際激活元素後面的鏈接。答：單獨的懸停效果不能做到這一點。 – straubcreative

-1

喔，我明白了！

你必須使用jQuery的tapHold函數。這裏有一個很好的例子，從豐富的亞當斯在GitHub上： https://github.com/richadams/jquery-taphold

這是我做這件事是我的代碼的方式，活生生的例子在我的網站：http://straubcreativeco.nationbuilder.com/web_development

$("#icon-block").bind("taphold", function() 
{ 
    $(this).css('background', '#cd763a'); 
});

EZPZ：d

來源

2014-03-02 08:18:25 straubcreative

當用戶在手機上觸摸屏幕時，如何添加css/jQuery過渡效果？

回答

相關問題