Как изменить цвет элемента HTML, когда пользователь нажимает на него? - PullRequest
Новая
       0

Как изменить цвет элемента HTML, когда пользователь нажимает на него?

3 голосов
/ 30 ноября 2011

Моя проблема настолько проста, что я не могу поверить, что не существует решения на основе HTML / CSS для iOS 4 и выше.

У меня есть сетка изображений, каждое из которых снабжено одной строкой серого текста.Текст ограничен линиями сверху и снизу.

Когда пользователь нажимает на элемент (изображение или подзаголовок), текст и строки должны изменить цветна белый и сбрасывает цвет, когда он снова поднимает палец.Мне было бы даже лучше, если бы в верхней части изображения появилась дополнительная строка.Весь элемент инкапсулирован в div.

. Я уже пытался использовать свойства CSS -webkit-tap-highlight-color, -webkit-active-link и :hover, :active в div или различных подэлементах, но безуспешнодо сих пор.

Как и предполагалось, я попробовал этот документ 

<!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;
}

Но, похоже, это тоже не работает.

Ответы [ 2 ]

4 голосов
/ 30 ноября 2011 
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>.Осталось только добавить к вашему элементу эти атрибуты: 

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

например <div id='element' onmousedown='changeClr( "element" , "#f00" );' onmouseup='changeClr( "element" , "#000" );'></div>

Этот код позволяет вам изменить цвет любого элемента, добавив эти атрибуты.

2 голосов
/ 30 ноября 2011

-webkit-tap-highlight-color - это то, что происходит, когда пользователь что-то нажимает, это не состояние «вкл / выкл». Вы должны использовать Javascript, как замечает Майкл, чтобы внести изменения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...