jQueryのHoverイベントは、同じ時刻に2つの異なるdivに影響します（ネストされていません）

jQuery関数を記述しようとしています。個々のdivだけでなく、そうでなければ私はCSSでそれをすることができます） - 画像を参照してください。 Image 2 jQueryのHoverイベントは、同じ時刻に2つの異なるdivに影響します（ネストされていません）

Image 1

私は1pxの固体赤い枠がグレーのヘッダ部分だけでなく、ユーザーが内の任意の場所に置いたときの画像は、すべてを一度に表示される要素の本体の周りに行きたいです。これが私の最初の日は、jQueryのを使用している

$(document).ready(function() { 
    $('div1').hover('border', '1px solid red'); 
});

ので、私はことがあります私は「DIV1」と下のクラス「DIV2」トップ部分クラスを呼び出す場合

さて、これは私がこれまで持っているものです完全にオフです。私はこれをプロジェクトのために行う必要があります。

また、もし私に知られていないcssでこれを行う方法があれば、私はその解決策を好むでしょう。

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

EDIT：このコードは以下の誰かからであるが、その本質的には私が必要なもの：

$(document).ready(function() { 
$('.div1').hover(function() { 
$(this).css('border', '1px solid red'); 
},function() { 
$(this).css('border', '0'); 
});

を}）;

「div1」だけでなく、「div2」にも同じことをしたいとは限りません。それがこのコードにどのように追加されますか？

出典

2017-02-02 bay_bay

あなたのHTMLを提供することはできますか？ –

すべてが複雑なWordPressテーマの中にあります。私は容易に利用可能なHTMLを持っていない –

テンプレートからの出力HTMLはどうですか？ –

div1カスタム要素でない限り、代わりにクラスまたはIDを参照する必要があります。 $.hover()には、要素の上にカーソルを置いたときに実行する関数が必要です。次に、境界の変更を指定するのに$.css()を使用します。

$(document).ready(function() { 
 
    $('.div1').hover(function() { 
 
    $(this).css('border', '1px solid red'); 
 
    },function() { 
 
    $(this).css('border', '0'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1">div1</div>

かかわらず、それを行うには良い方法は、ホバー上のクラスを割り当てることです。

$(document).ready(function() { 
 
     $('.div1').hover(function() { 
 
     $(this).addClass('border'); 
 
     },function() { 
 
     $(this).removeClass('border'); 
 
     }); 
 
    });

.border { 
 
    border: 1px solid red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1">div1</div>

そして、それを行うにしても良い方法はただ、ただ、ここで良い測定のためにすることを含めても、あなたの質問に必ずしも答えをCSSを使用しています。

.div1:hover { 
 
    border: 1px solid red; 
 
    }

<div class="div1">div1</div>

出典

2017-02-02 21:32:08

このコードをいただきありがとうございます。私が今抱えている唯一の問題は、ユーザーがdiv1またはdiv2（イベントが同時に発生しなければならない）に乗っていても、div1とdiv2の両方が影響を受けなければならないことです。 –

@bay_bay問題はありません。私はあなたのコードがその動作を複製するのを見る必要があります。 –

あなたは:hover CSS擬似セレクター

.div1:hover { 
    border : 1px solid red; 
}

出典

2017-02-02 21:35:02 JohanP

を使用することができ、これは完全にHTMLとCSSで実現することはできません何らかの理由はありますか？ユーザーが親要素の上を移動すると、赤い枠線が適用されます。これと同じように：

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
.main { 
 
    height: 300px; 
 
    width: 300px; 
 
    border-radius: 5px; 
 
    border-color: black; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
} 
 

 
.main:hover { 
 
    border-color: red; 
 
} 
 

 
.header { 
 
    background-color: gray; 
 
    width: 100%; 
 
    height: 30%; 
 
    text-align: center; 
 
} 
 

 
.content { 
 
    background-color: white; 
 
    width: 100%; 
 
}

<html> 
 

 
    <body> 
 
     <div class="main"> 
 
      <div class="header">Round Stickers</div> 
 
      <div class"content"></div> 
 
     </div> 
 
    </body> 
 

 
</html>

出典

2017-02-02 21:36:37 taylorsabell

それはあなたのようにそのdivが入れ子になっていました。残念ながら、彼らはそうではありません。それで、なぜ私はjQueryが必要かもしれないと思ったのです –

jQueryのHoverイベントは、同じ時刻に2つの異なるdivに影響します（ネストされていません）

答えて

関連する問題