0

どのリンクがホバーされているかに応じて、さまざまなクラス (背景画像を持つ) を表示しようとしています。JSfiddleをまとめて、どこまで到達したかを示しました。

問題は、ホバー時に画像が表示されないことです。

私は自分のhtmlの構造についても心配しています。特に、クラスはその名前に応じて異なる数の星を示しているため、2つの星を表示するにはクラスを使用します

.twoStars

三つ星使用

.threeStars

などなど・・・大丈夫ですか？これを行うより良い方法はありますか？そして、html の各 li 要素に星の数を保持する正しいクラスを追加するのではなく、jquery でホバー時にクラスを追加できませんか? jqueryにはaddClassメソッドがあることは知っていますが、これは、li内の次の要素ではなく、liクラスに追加するだけです...

それが理にかなっていることを願っています。フィドルが問題を解決すると思います。

現在のセットアップが期待どおりに機能しない理由を知りたいと思っています。

ありがとう

4

2 に答える 2

1

まず、コメントで指摘したように、配列が満たされていないため、ifステートメントが不発になっています。それはさておき、クラスの命名システムはそれほど悪くはありませんが (キャメルケースよりもクラス名ではダッシュの方が標準的だと思いますが)、jQuery には重大な競合があります。

あなたの CSS はそのままで問題なく、HTML 構造は恐ろしいものではありません。どちらかを変更することもできますが、Javascript から始めることになると思います。おそらく、すでに多くの HTML と CSS を配置しているでしょう。js はシンプルで簡単な変更です。以下は、それが私に渡された場合、 「私」がそれをどのように書き換えるかです。長いif文を描かずに、あなたが望む効果を達成していると思います。また、 jQuery の .data()メソッドを使用して「元のテキスト」を記録していますが、現時点では使用していません。

$(function() {
    //  saves "original text" to LI element's data
    $('.skillsDouble li').each(function(i) { $(this).data("oText", $.trim($(this).text())); });
    //  begins "delegating" events to selected elements, in this case, 'mouseenter' to all LI's of .skillsDouble
    $(document).on("mouseenter", '.skillsDouble li', function(e) {
        //  just to make things easy, I grab the stuff we want to work with and make it local variables
        var txt = $(this).find('.text'),    //  our text element
            rate = $(this).find('[class*=Star]'),   //  our ratings element based on any inner element having a class name "containing the phrase 'Star'"
            oText = $(this).data("oText");  //  our original text, if you still want it for something else

        txt.stop().hide();  //  hide the text
        rate.stop().animate({   //  show the stars
            left: 400,
            opacity: "show"
        });
    })
    .on("mouseleave", '.skillsDouble li', function(e) { //  now delegate mouseleave
        //  same localvariables
        var txt = $(this).find('.text'), rate = $(this).find('[class*=Star]'), oText = $(this).data("oText");

        rate.stop().hide(); //  hide the stars
        txt.stop().fadeIn(1000);    //  show the text
    })
})

実施例

別の例
- 「フェード」効果の別の使用例も示します

于 2013-06-24T13:12:04.800 に答える
0

display:none;css にがあります。しかし、それが表示されるはずのJavascriptでは、追加する必要がありますdisplay:block;

不透明度で文字列を使用すると、これを削除できます。0 から 1 までの数値を取り、css で不透明度のみが必要になります。( http://www.quirksmode.org/css/opacity.html )

于 2013-06-24T12:38:18.980 に答える