2017-02-09 19 views
5

ボタンのスタイルを変更する方法がCSSであればクリックした後にelement:activeではないと思っていました。 ありがとう!クリック後のCSS変更ボタンのスタイル

+0

ここにコードを貼り付けて少し説明していただけますか? –

+0

jQuery関数を追加して、クリック時のボタンに余分なクラスを追加することができます –

答えて

7

純粋なCSSオプションをお探しの場合は、:focus擬似クラスを使用してみてください。

#style { 
    background-color: red; 
} 

#style:focus {  
    background-color:yellow;  
} 
2

ボタンのアクティブとフォーカスの擬似要素を選択するだけで、CSSで行うことができます。 http://codepen.io/fennefoss/pen/Bpqdqx

ます。また、背景色を変更する簡単なjQueryのクリック機能を書くことができます:

button:active{ 
    background:olive; 
} 

button:focus{ 
    background:olive; 
} 

はcodepen参照してください。

HTML:

<button class="js-click">Click me!</button> 

CSS:

button { 
    background: none; 
} 

はJavaScript:

$(".js-click").click(function() { 
    $(".js-click").css('background', 'green'); 
    }); 

チェックアウトこのcodepen:http://codepen.io/fennefoss/pen/pRxrVG

3

あなたのコードで何をしたがトン?

a { 
 
    padding: 5px; 
 
    background: green; 
 
} 
 
a:visited { 
 
    background: red; 
 
}
<a href="#">A button</a>

それとも、以下のように、クリック時にクラスを追加するためにjQueryを使用することができます:

$("#button").click(function() { 
 
    $("#button").addClass('button-clicked'); 
 
});
.button-clicked { 
 
    background: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">Button</button>

それはタグの場合は、これを行うことができます
1

ボタンが<a>の要素の場合は、:visitedセレクタ。

あなたはしかし、あなただけ変更することができます制限されています:

  • カラー
  • 背景色
  • ボーダー色(およびそのサブプロパティ)
  • アウトラインカラー
  • 塗りと線のプロパティのカラー部分

私はしていませんthis article about revisiting the :visitedを読んでください。しかし、もっとスマートな人たちがそれをハックする方法を見つけたかもしれません。 linkhoveractivefocusedvisited

7

各リンクは、5つの異なる状態があります。

Linkhoverはあなたにマウスオーバー、activeは、それがクリックされたの状態があるときに、focusedがアクティブに続き、あなたが最近クリックしたリンクを非フォーカス時にvisitedはあなたが終わる状態であり、正常な外観です。

私はあなたがどちらかfocusまたはvisitedに異なるスタイルを実現したい推測している、あなたは、次のCSSを追加することができます任意のトラブルを起こさないためにあなたのCSSに

a { color: #00c; } 
a:visited { #ccc; } 
a:focused { #cc0; } 

A推奨順は以下の通りです。 :

a 
a:visited { ... } 
a:focused { ... } 
a:hover { ... } 
a:active { ... } 

あなたは(:HOV、エレメント> STYLE->フィルターを点検/クローム>開発ツール):次のように要素の状態を強制するには、Webブラウザの開発ツールを使用することができます Force state in Chrome Developer Tools

関連する問題