63

button押すとスタイルが変わるものを作りたいです。これは私の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

5 に答える 5

75

<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クラスを適用/削除する必要があります。それははるかに複雑ではないでしょう。

于 2013-03-17T17:43:56.923 に答える
22

:focusユーザーが他の場所をクリックしない限り、スタイルを維持するものを使用できます。

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

button:focus {
    border: 2px solid red;
}
于 2013-03-17T17:32:22.413 に答える
7

少しJSを含める必要がありますか？CSSは基本的にこのジョブ用に作成されていないためです。CSSは、HTMLにスタイルを追加するための単なるスタイルシートでしたが、その疑似クラスは、基本的なCSSでは実行できないことを実行できます。たとえば、button:activeアクティブは疑似です。

参照：

http://css-tricks.com/pseudo-class-selectors/疑似について詳しくは、こちらをご覧ください。

あなたのコード：

あなたが持っている基本的なコードですが、役に立ちます。そして、yes:activeは、クリックイベントがトリガーされたときにのみ発生します。

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が行うこと：

JavaScriptのjQueryライブラリは、このコードに役立ちます。次に例を示します。

$('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');
}

このようにして、ナビゲーションメニューを作成します。タブをクリックすると、タブの色が自動的に変更されます。:)

あなたが答えを得ることを願っています。幸運を！乾杯。

于 2013-09-24T15:52:04.427 に答える
1

ボタンが新しいページを開く場合は、phpを使用してこれを行うことができます。

たとえば、pagename.phpという名前のページへのボタンリンクがURL：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>

注：私はこのコードを試しませんでした。調整が必要な場合があります。

于 2013-07-19T00:46:36.900 に答える
0

多分:active終わっ:focusて:hover助けになるでしょう！試す

button {
background:lime;
}

button:hover {
background:green;
}

button:focus {
background:gray;
}

button:active {
background:red;
}

次に：

<button onkeydown="alerted_of_key_pressed()" id="button" title="Test button" href="#button">Demo</button>

次に：

<!--JAVASCRIPT-->
<script>
function alerted_of_key_pressed() { alert("You pressed a key when hovering over this button.") }
</script>

その最後のものについて申し訳ありません。:)私はちょうどあなたにクールな機能を見せていました！
待ってください...コードブロックを強調しただけですか？これはかっこいい!!!
于 2019-09-06T04:24:37.080 に答える