css：ホバー時の角丸div

StackOverflow https://stackoverflow.com/questions/428280

  •  06-07-2019
  •  | 
  •  

質問

非常に単純に思えた何かを達成しようとしています...

ラジオボタンといくつかのコンテンツを含む3つの div があります：

     Content of DIV1,
[]   this can be as long or as tall
     as wanted

[]   Content of DIV2

[]   Content of DIV3

他の投稿はこちら。それでも、ホバーイベントに対してのみこれを行うことはできません。つまり、マウスがホバーしたときにのみdivの周りに丸いボックスが表示されるようにします。どこかでこれが行われている例を見た人はいますか？

編集：私はすでにPrototypeとScriptaculousを使用しています。これだけのためにjQueryを追加することはできません。

役に立ちましたか？

解決

これは、divのホバーでjqueryを使用してCSSを変更します

print("<div id="output" class="div"></div>



<script>

    jQuery(document).ready(function() {

    $("#output").hover(function() {
        $(this).css({ 'background-color': 'yellow', 'font-weight': 'bolder' });
    }, function() {

    $(this).css({ 'background-color': 'blue', 'font-weight': 'bolder' });
    });


    }
    );

＆quot;）;

他のヒント

発生する可能性のある問題の一部は、CSSのほとんどの実装（およびブラウザーのそのテクノロジーの実装）で、divにスタイルルールをアタッチできる：hoverメソッドがないことです。

Antonyが述べたように、jQueryはこれを回避できる可能性があります。

どのように攻撃するか（jQueryを調査していないため）は、タグ（ does にホバーメソッドがあります）を設定して、すべてのアテンダントルールを表示します。 divであるかのように設定し、それを含むdivを埋めるように展開し、そしてもちろん、角丸のルールをホバーに追加します。

別の方法は、divをaタグで囲むことですが、それでもやはり、display：block、背景、および実際にはaに属さないその他のルールを設定しています。

これは構文の残酷な乱用であるため、提案する前に作業をバックアップしてください。

幸運-常にdivで丸めておくと、ホバーエフェクトを呼び出すために他にできることを考えた方が簡単でしょう。

jqueryでできると確信しています。
http://docs.jquery.com/CSS

http://docs.jquery.com/Events/hover

Cssは、問題の解決に利用できるホバー擬似セレクターを定義するか、JavaScriptを使用して、CSSクラスをイベントonMouseEnter onMouseOutの正しいdivに追加/削除する効果をシミュレートします。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top