3

サイドバーのナビゲーション メニューで使用されるサンプル Web サイトで、いくつかの CSS div ボタンを作成しました。マウスがボタンの上に置かれたときにのみテキストが表示されるようにする方法を考えていました。

div のみのホバー部分の下の CSS にテキスト (例: 「ここをクリック!」) を含める方法があった場合、それは機能しますが、それはできないと思います。HTML に含めると、ホバーの有無に関係なく表示されます。

サンプルのウェブサイトはこちら: http://www.arthiaravind.com/nursery/

理想的には、ボタンは空白にして、ホバーするとボタンが伸びてリンクが表示されるようにします。

最初のボタンのコードは次のとおりです。

.button1 {
    position: fixed;
    margin-top: 100px;
    margin-left: 730px;
    width:70px;
    height:50px;
    text-align:right;
    padding: 0px 50px 0px 0px;
    background:#75AD38;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

ホバーしたときのコードは次のとおりです。

.button1:hover{ 
    width:200px;
}

現在、5 つのボタンのそれぞれにこのコードをコピーペーストしているため、コードをより合理化するための提案もいただければ幸いです。個別に配置します。

また、ページを読み込んだときにボタンが伸びる理由もわかりません。そんなはずはない。

ありがとうございました！

4

6 に答える 6

3

CSSボタンのテキストをにのみ表示するにhoverは、CSSプロパティを使用するcontentか（クロスブラウザサポートを検索する必要があります）、JavaScriptを使用するか、他の人が提案しているようにホバー時にテキストの色を変更します。これは、最初の2つのソリューションに対処するJSフィドルです。

http://jsfiddle.net/ABHgN/1/

/*<div id="button1"></div>*/

#button1{
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: green;
}

#button1:hover:before{
    content: "viaCSS ";
}
于 2013-03-14T04:16:42.470 に答える
2

可能な解決策は、フォントの色を背景色に設定し、ホバー時に変更することです。このフィドルはそれを示しています: http://jsfiddle.net/LXxG3/

CSSにフォントの色を追加します

.button1{
    background:#75AD38;
    color:#75AD38;
}

とホバーカラー

.button1 hover{
    color:#fff;
}

CSS の合理化に関しては、単純にスタイルをベース タグに適用し、button次に個々のスタイルをクラス名で適用します。たとえば、2 つのボタンに個別の背景色を設定するには... 編集: ボタンを に変更.baseButtonして、ボタン div の基本クラスとして使用できるようにします

/*style for all button tags */
.baseButton{
    width:70px;
    height:50px;
    margin-top: 100px;
    margin-left: 30px;
    text-align:right;
    padding: 0px 50px 0px 0px;
    background:#75AD38;color:#75AD38;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

/*individual styles */
.button1{
    background-color:#afa;
    color:#afa;
}
.button2{
    background-color:#faa;
    color:#faa;
}

これは、html で次のように使用されます。

<div class="baseButton button1">Your button</div>

別の方法は、個々のボタンに ID を使用することです。

CSS

 /*individual styles */
#button1{background-color:#afa;color:#afa;}
#button2{background-color:#faa;color:#faa;}

html

<div class="baseButton" id="button1">Your button</div>
于 2013-03-14T03:59:42.793 に答える
1

上のテキストの色を変更できますhover

見えないようにすることで、通常の状態に同じように置きます

 .button1 {
     position: fixed;
     margin-top: 100px;
     margin-left: 730px;
     width:70px;
     height:50px;
     text-align:right;
     padding: 0px 50px 0px 0px;
     background:#75AD38;
     color:#75AD38;   // same color as background
     transition:width 2s;
     -moz-transition:width 2s; /* Firefox 4 */
     -webkit-transition:width 2s; /* Safari and Chrome */
     -o-transition:width 2s; /* Opera */
}


.button1:hover {
    color:#fff ||#000 //like any suitable color 
}

しかし、それは正しい方法ではありません

あなたも使うことができますtext-indent

または、私たちが使用していて動作content:"text";しているようにホバーすると思いますが、よくわかり ません。:before:after

ノート：

ボタンの機能を確認するためにすべてのボタンをホバーする必要があると、ユーザーがイライラするため、使いやすさの点でも良くありません。

于 2013-03-14T04:03:38.060 に答える
0

貴重な CSS コードを使用してください。

http://jsfiddle.net/hassaan39/NheFj/

I use the text visibility hidden, on hover visibility visible.単に最高です。

于 2013-03-16T21:58:51.183 に答える
0

使用経験に影響を与えるため、これを行わないことを個人的にお勧めします。コンテンツを検索するときに、すべてのボタンにカーソルを合わせるのが煩わしいと感じる人もいるでしょう。

ただし、それでも先に進みたい場合は、ここに実用的なフィドルがあります

基本的に、このようにテキストのスタイルを設定します

.button1 p {
display:none;

}

そして、このようにホバーすると見えるようにします

.button1:hover p {
    display:inline;

}

于 2013-03-14T04:42:56.990 に答える
0

css子コンビネータを使用してホバー時にのみテキストを表示する方法の簡単な例を次に示します

 <div>
  <p>text</p>
 </div>

/** CSS **/
* {
 margin: 0;
 padding: 0;
}

div {
 width: 60px;
 height: 40px;
 background-color: green;
 border: 1px solid #000;
}

p {
 text-align: center;
 color: #fff;
 vertical-align: middle;
 display: none;
 line-height: 40px;
}

div:hover > p {
 display: block;
}

jsfiddle

于 2013-03-14T05:49:51.010 に答える