Нажал CSS


Я хотел бы создать кнопку, которая изменяет его стиль при нажатии. Это мой CSS код:

button {
    font-size: 18px;
    border: 2px solid gray;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

button:active {
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}
<button>Button</button>

он изменяется только тогда, когда я нажимаю и удерживаю его. Я хочу, чтобы он изменил стиль после нажатия. Например, нормальное состояние будет белым, состояние при щелчке будет зеленым, а после щелчка будет красным.

4   51  
2013-03-17 21:30:25

4 ответа:

вы можете сделать это, если вы используете <a> тег вместо кнопки. Я знаю, что это не совсем то, что вы просили, но это может дать вам некоторые другие варианты, если вы не можете найти решение для этого:

заимствование из демо из другого ответа здесь я произвел следующим образом:

a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}
<a id="btn" href="#btn">Demo</a>

обратите внимание на использование :target; это будет стиль, применяемый, когда элемент нацелен через хэш. Что также означает, что ваш HTML должен быть таким: <a id="btn" href="#btn">Demo</a> ссылка, нацеленная на себя. и демо http://jsfiddle.net/rlemon/Awdq5/4/

спасибо @BenjaminGruenbaum вот это лучше демо: http://jsfiddle.net/agzVt/

также, как сноска: это действительно должно быть сделано с JavaScript и применением / удалением классов CSS из элемента. Это было бы гораздо менее запутанным.

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

button:active {
    border: 2px solid green;
}

button:focus {
    border: 2px solid red;
}

должны ли мы включить немного JS? Потому что CSS не был в основном создан для этой работы. CSS был просто таблицей стилей для добавления стилей в HTML, но его псевдоклассы могут делать то, что не может сделать базовый CSS. Например button:active активный-это псевдо.

ссылки:

http://css-tricks.com/pseudo-class-selectors/ Вы можете узнать больше о псевдо здесь!

код:

код что у вас есть основные, но полезные. И да :active будет происходить только после того, как событие click срабатывает.

button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}

button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}

это то, что CSS будет делать, то, что предложил rlemon, хорошо, но это, как он предложил, потребует a тег.

как использовать CSS:

можно использовать :focus тоже. :focus будет работать после того, как щелчок сделан и будет оставаться до тех пор, пока вы не нажмете где - то еще, это был CSS, вы пытались использовать CSS, поэтому используйте :focus изменить кнопки.

что бы сделал JS:

библиотека jQuery JavaScript поможет нам в этом коде. Вот пример:

$('button').click(function () {
  $(this).css('border', '1px solid red');
}

это позволит убедиться, что кнопка остается красной, даже если нажать выходит. Чтобы изменить тип фокуса (чтобы изменить цвет красного на другой), вы можете использовать это:

$('button').click(function () {
  $(this).css('border', '1px solid red');
  // find any other button with a specific id, and change it back to white like
  $('button#red').css('border', '1px solid white');
}

таким образом, вы создадите меню навигации. Что автоматически изменит цвет вкладки при нажатии на них. :)

надеюсь, вы получите ответ. Удачи вам! Овации.

вы можете сделать это с PHP, если кнопка открывает новую страницу.

например, если кнопка ссылается на страницу с именем pagename.PHP как, адрес: кнопку www.website.com/pagename.php будет оставаться красным, как долго, как вы оставаться на этой странице.

я взорвал url на ' / ' и получил что-то вроде:

url[0] = pagename.php

<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?>


<html>
<head>
  <style>
    .btn{
     background:white;
     }
    .btn:hover,
    .btn-on{
     background:red;
     }
  </style>
</head>
<body>
   <a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a>
</body>
</html>

примечание: Я не пробовал этот код. Это может потребовать корректировки.