1

これは複雑すぎて実現できませんか? うまくいけば、私の質問またはタイトルは理にかなっています。基本的に、2 つの div があります。1 つは で、もう 1 つは です。ID を添付したと思った各 div 内に 12 個の画像があります。私はまだ Web コーディングに慣れていないので、間違ったラベルを付けている可能性があります。しかし、ここに私の目標があります。アートワーク 1 にカーソルを合わせると、アートワーク 1 とボタン 1 の不透明度が同時に変化するはずです。また、効果は別の方法でも実現する必要があります (つまり、hover:button1 は、artwork1 の不透明度を変更する必要があります)。以下は、私のケースをさらに説明するための私のコードです。

<html> <body> <div id="buttons">

<a href="..." id="button1"><img src="..." class="spaced"(to spaced the buttons)></a>
<a href="..." id="button2"><img src="..." class="spaced"></a>

<div id="artwork">

<a href="..." id="artwork1"><img src="..." class="mainbuttons & greydout"</a>
<a href="..." id="artwork2"><img src="..." class="mainbuttons & greydout"></a>

「mainbuttons」クラスは、12 個の画像間の間隔を設定するためのものです。そして、greydout クラスは、既に適用されているホバー効果を変更することです - 不透明度 0.3 から 1 に変更します。それが最も適切な解決策だと考えているので、いくつかの JavaScript を調査しようとしました。私が使用しようとした私のjavascriptは次のとおりです。

$(document).ready(function() {

   $("#button1").mouseenter(function(){
       $("#artwork1").addClass("opac_art");
   });

   $("#button1").mouseleave(function(){
      $("#artwork1").removeClass("opac_art");
      $("#artwork1").addClass("greydout")
   });
});

考慮すべきもう 1 つの点は、さまざまな機能のために複数のスクリプトを実行していることです。1) モバイル ユーザーをモバイル サイトにリダイレクトするリダイレクト スクリプト。2) ビューポートをビューアーの解像度ブラウザー サイズが設定されているものに再フォーマットする応答スクリプト。

ドキュメントの上部に jQuery をロードしましたが、html ページで実行されている他のスクリプトと競合する可能性はありますか?

私はCSSルートを試してみましたが、divを相互にやり取りさせることはほとんどできません。最も近いのは、ボタン div にカーソルを合わせたときです。アートワーク 1 を変更できますが、目指しているほど具体的ではありません。これがすべて理にかなっていることを願っています。これをすべて読んで、この巨大な障害を乗り越えてサイトを立ち上げるのを手伝ってくれてありがとう.

4

2 に答える 2

0

私があなたの質問を理解していることから、次のようなことができます：

$(document).ready(function()
{
    $("#one").hover(function()
    {
        // Changes the opacity of the first image
        // as well as the corresponding link from
        // 1 to 0.3.
        $("#artone").css({ "opacity": "0.3" });
        $(this).css({ "opacity": "0.3" });
    });

    $("#two").hover(function()
    {
        $("#arttwo").css({ "opacity": "0.3" });
        $(this).css({ "opacity": "0.3" });
    });
});

HTML は次のようになります。

<div id="links">
    <a href="#" id="one">Link one</a>
    <a href="#" id="two">Link two</a>
</div>
<div id="artwork">
    <img src="" id="artone" class="spaced">
    <img src="" id="arttwo" class="spaced">
</div>

いくつかの余分なもの -

実際に jQuery をページのヘッダーにリンクしていることを確認してください。上には表示されませんでした。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

これは Google の CDN からのものですが、もちろんローカルでも実行できます。

<a href="#" id="artwork1"><img src="#" class="mainbuttons & greydout"></a>

要素のクラスをリストするときは、アンパサンド (&) を追加せず、その間にスペースを入れます。

<a href="#" id="artwork1"><img src="#" class="mainbuttons greydout"></a>

于 2013-03-30T07:35:38.240 に答える
0

このようなことを試してください。

ボタン (galleryButtons) と他の div の画像にクラスを追加します。

まず、タグでラッピングする必要はありません ボタン要素とアートワークにクラスを追加します。

<div id="buttons">
    <img id="gbutton1" class="galleryButtons" src="button.png" />
    <img id="gbutton2" class="galleryButtons" src="button.png" />

<div id="artwork">
    <img id="artwork1" class="artworkImage" src="art1.jpg" />
    <img id="artwork2" class="artworkImage" src="art2.jpg" />

$(document).ready(function () {
    var intID;
    $(".galleryButtons").hover(function (e) {
        console.log(e.target.id);
        var id = e.target.id;
        intID = id.replace(/^\D+/g, '');
        $("#artwork" + intID).addClass("opac_art");
    }, function () {
        $("#artwork" + intID).removeClass("opac_art").addClass("greydout");

    });
    $(".artworkImage").hover(function (e) {
        var id = e.target.id;
        intID = id.replace(/^\D+/g, '');
        $("#gbutton" + intID).addClass("opac_art");
    }, function () {
        $("#gbutton" + intID).removeClass("opac_art").addClass("greydout");

    });
});

フィドルであなたのために：http://jsfiddle.net/djwave28/et6tD/4/

賢く選択すれば簡単にできますが、要素内の関係をよく見てもらいたかったのです。要素にカーソルを合わせると、イベントを発生させた要素が関数に送信されます。このイベントには情報が含まれています。同様に e.target.id はその要素の ID を保持します。 http://www.w3schools.com/jsref/dom_obj_event.asp

于 2013-03-30T07:33:47.000 に答える