Question

我的问题很简单，我无法相信iOS 4及更高版本没有基于HTML / CSS的解决方案。

我有图像网格，每个图像都有一行灰色文字。文本以顶部和底部的线条为界。

当用户在元素（图像或字幕）上轻击时，文本和线条应该将颜色更改为白色，并在他再次抬起手指时重置颜色。如果在图像顶部出现一条额外的线条，我甚至会更好。整个元素封装在div。

中

我已尝试在div或各个子元素上使用CSS属性-webkit-tap-highlight-color，-webkit-active-link和:hover，:active，但目前尚未取得任何成功。

正如建议的那样，我尝试了这个文件

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="highlight.css" />
    <style type="text/css"></style>
    <script type="text/javascript">
      div = document.getElementById('element');
      div.ontouchstart = function(){this.style.backgroundColor = '#fff';} // on tapping
      div.ontouchend = function(){this.style.backgroundColor = '#000';} // on releasing
    </script>
   <title></title>
  </head>
  <body>
    <div id="element">
      <p>Dies ist noch ein Test.</p>
      <p>Wenn man auf <a href="#">diesen etwas laengeren Link </a> tappt, sollte was     passieren.</p>
    </div>
  </body> 
</html>

使用此样式表

#element {
    width:200px;
    height:200px;
    border:solid;
    border-color:blue;
    -webkit-user-select:none;
}

但这似乎也行不通。

Answer 1

div = document.getElementById('#DIV');
div.onmousedown = function(){this.style.backgroundColor = ###;} // on tapping
div.onmouseup = function(){this.style.backgroundColor = ###;} // on releasing

既然你没有进入JS - 这里有完整的脚本：

<script>
div = document.getElementById('elem');
div.onmousedown = function(){this.style.backgroundColor = '#f00';} // on tapping
div.onmouseup = function(){this.style.backgroundColor = '#000';} // on releasing
</script>

将它放在元素的标记之后。

这里有更好的东西：

<script>
function changeClr( id , clr ){
    document.getElementById( id ).backgroundColor = clr;
}
</script>

将上面的代码放在<head>元素中。剩下要做的就是添加你的元素theese atts：

onmousedown='changeClr( "id" , "#f00" );' onmouseup='changeClr( "id" , "#000" );'

e.g。 <div id='element' onmousedown='changeClr( "element" , "#f00" );' onmouseup='changeClr( "element" , "#000" );'></div>

该代码允许您通过添加theese atts来更改任何元素的颜色。

Answer 2

-webkit-tap-highlight-color就是当用户点击某些内容时发生的事情，它不是“开/关”状态。您必须使用Javascript作为Michael备注来实现更改。

当用户点击HTML元素时，如何更改HTML元素的颜色？

2 个答案: