質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

537閲覧

Aをhoverしたとき、別のBを同時にhoverさせたい。

veronica

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/08 10:23

編集2019/08/08 10:25

サイトURL
http://uu-hokkaido.cedars.jp/renewal.shtml

メインビジュアルの北海道の地図の上の、地域のエリアをマウスオンすると、:でピンクの丸が濃くなるのですが、
例えば、札幌にマウスオンすると、ピンクの丸が濃くなると同時に、地図の横にある8つの長方形バナーの左上にある「札幌・小樽・道央」の文字も一緒に:hoverされピンク色に代わるようにするにはどのようにすればよいでしょうか?

逆で、地図の横にある8つの長方形バナーの左上にある「札幌・小樽・道央」をhoverすると、北海道の地図の上の、地域のエリアの札幌のピンクの丸もhoverしたいです。

どなたか、お分かりになる方、ご教授お願い致します。

マルチポストです。
回答が解決しないまま1週間が経過しましたので、こちらで質問させていただきました。

https://ja.stackoverflow.com/questions/56687/hover%e3%82%922%e3%81%a4%e9%80%a3%e5%8b%95%e3%81%97%e3%81%9f%e3%81%84%e3%81%a7%e3%81%99

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/08 11:38

SOでもそうかと思いますが、サイトURLをそのまま貼ると宣伝目的と捉えられて回答がつきづらくなります。(わざわざサイトのコードを観に行かなければならないことで回答者に強いている操作も多い) ご自身のコードを質問本文にご提示ください。 それに・・・ いきなり本番に実装するのではなくミニマムコードできちんと実装確認できてからでないと何が影響するか問題切り分けを困難にします(だから解決していないと見えます)
veronica

2019/08/10 07:45 編集

自己解決できました。 html <div class="area_map"> <ul class="pointer_list"> <li> <a href="http://uu-hokkaido.cedars.jp/index.shtml"><div class="query_btn map_pointer map_pointer01-01" id="sap"></div></a></li> </ul> </div> <div class="area_list"> <ul class="query_list -left"> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button" id="sap_aera">&nbsp;&nbsp;&nbsp;札幌・小樽・道央&nbsp;&nbsp;&nbsp;</a></li> </ul> </div> jQuery //札幌エリア $(function () { //マウスを乗せたら発動 $('#sap').hover(function () { //マウスを乗せたら色が変わる $(this).css('background', 'rgba(233, 30, 99, 0.71)'); $('#sap_aera').css('color', '#E91E63'); //ここにはマウスを離したときの動作を記述 }, function () { //色指定を空欄にすれば元の色に戻る $(this).css('background', ''); $('#sap_aera').css('color', ''); }); }); $(function () { //マウスを乗せたら発動 $('#sap_aera').hover(function () { //マウスを乗せたら色が変わる $(this).css('color', '#E91E63)'); $('#sap').css('background', 'rgba(233, 30, 99, 0.71)'); //ここにはマウスを離したときの動作を記述 }, function () { //色指定を空欄にすれば元の色に戻る $(this).css('color', ''); $('#sap').css('background', ''); }); });
guest

回答2

0

自己解決

自己解決できました。

html

<div class="area_map"> <ul class="pointer_list"> <li> <a href="http://uu-hokkaido.cedars.jp/index.shtml&quot;&gt;&lt;div class="query_btn map_pointer map_pointer01-01" id="sap"></div></a></li> </ul> </div> <div class="area_list"> <ul class="query_list -left"> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml&quot; class="query_btn _btn" role="button" id="sap_aera">&nbsp;&nbsp;&nbsp;札幌・小樽・道央&nbsp;&nbsp;&nbsp;</a></li> </ul> </div>

jQuery
//札幌エリア
$(function () {

//マウスを乗せたら発動
$('#sap').hover(function () {

//マウスを乗せたら色が変わる
$(this).css('background', 'rgba(233, 30, 99, 0.71)');
$('#sap_aera').css('color', '#E91E63');

//ここにはマウスを離したときの動作を記述
}, function () {

//色指定を空欄にすれば元の色に戻る
$(this).css('background', '');
$('#sap_aera').css('color', '');

});
});

$(function () {

//マウスを乗せたら発動
$('#sap_aera').hover(function () {

//マウスを乗せたら色が変わる
$(this).css('color', '#E91E63)');
$('#sap').css('background', 'rgba(233, 30, 99, 0.71)');

//ここにはマウスを離したときの動作を記述
}, function () {

//色指定を空欄にすれば元の色に戻る
$(this).css('color', '');
$('#sap').css('background', '');

});
});

投稿2019/08/10 07:46

veronica

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

0

:hoverと同等の処理に.hoverなどクラスをつけてみるとか?

javascript

1<style> 2a{display:block;border:solid 1px;background-Color:gray;} 3a:hover,a.hover{background-Color:yellow;} 4</style> 5<script> 6window.addEventListener('DOMContentLoaded',()=>{ 7 document.querySelector('#a').addEventListener('mouseover',e=>{ 8 document.querySelector('#b').classList.add('hover'); 9 }); 10 document.querySelector('#a').addEventListener('mouseout',e=>{ 11 document.querySelector('#b').classList.remove('hover'); 12 }); 13}); 14</script> 15</script> 16<a href="#" id="a">a</a> 17<a href="#" id="b">b</a> 18<a href="#" id="c">c</a>

※今回はtrigger利用しないので一部修正

投稿2019/08/08 10:31

編集2019/08/08 10:42
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

veronica

2019/08/10 07:46 編集

ご教授ありがとうございました。やってみましたが、上手く行きませんでした。 自己解決できました。どうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問