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

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

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

Когда пользователь отбрасывает на элемент (изображение или субтитр), текст и линии должны менять цвет на белый и сбрасывать цвет, когда он снова поднимает палец. Я бы даже лучше, если в верхней части изображения появится дополнительная строка. Весь элемент инкапсулирован в 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; 
}

Но это тоже, кажется, не работает.

источник

2011-11-30 tomk

the: hover и: active pseudo class work only on A tags ... – Leon

@Leon: Абсолютно не так. Hover хорошо работает и с элементами таблицы, и с div. –

извините, что нужно добавить «в IE6», но не связан с браузерами WebKit .... – Leon

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 АТЦ:

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

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

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

источник

2011-11-30 14:47:30

Это влияет на цвет текста и строки? И что именно вы подразумеваете под ###? (Извините, я пока не в JavaScript) – tomk

Просто взгляните на код; это влияет на цвет фона элемента, который вы вызываете, - «#DIV». Если вы измените 'backgroundColor' на' color' - это повлияет на текст внутри «#DIV». ### означает цветовой код, например. '' # f00'' даст вам красный цвет, а также '# FF0000'; –

Большое спасибо за вашу помощь. Но это также не работает. См. Мой вопрос снова. – tomk

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

источник

2011-11-30 14:52:39

ах, извините. Он должен снова изменить цвет на серый, если пользователь снова поднимет искатель. – tomk

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

ответ

Смежные вопросы