Q&A
前提・実現したいこと
プログラミング初めて2ヶ月の初心者です。
以下のコードを確認するとグレーの領域にマウスを近づけると｢〇〇の説明文です｣がすべて表示されると思います。
これを例えばaの場所に近づけたらaの説明文だけ表示されるように変更したいです。
理想としてはv-forのインデックス番号を元にマウスを近づけた要素の番号を取得してHTMLの上からn番目の要素を非表示にする
またはマウスを近づけた要素に対してクラスを付与して表示･非表示切り替えるといった処理がしたいです。
そういった処理は可能でしょうか。
発生している問題・エラーメッセージ
エラーメッセージはありません
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <title>あああ</title> 8 9 <link rel="stylesheet" href="main.css"> 10 11<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> 12</head> 13 14<body> 15 <div id="app"> 16 <div class="parents" v-for="(rs_book,index) in rs_books" v-bind:key="index" v-on:mouseover="mouseooverfunction" v-on:mouseleave="mouseleavefunction"> 17 <div class="child" v-show="mouseStatus">{{rs_book}}の説明文です。</div> 18 </div> 19 20 <script src="main.js"></script> 21 <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> 22</body> 23 24</html> 25
CSS
1.parents{ 2 width:250px; 3 height:50px; 4 background-color: gray; 5}
javascript
1new Vue({ 2 el: "#app", 3 data: { 4 rs_books: ["a","b","c","d","e","f","g"], //release_scheduled_books,近日発売予定の本 5 mouseStatus:"true", 6 }, 7 methods: { 8 mouseooverfunction(){ 9 this.mouseStatus=true; 10 }, 11 mouseleavefunction(){ 12 this.mouseStatus=false; 13 }, 14 } 15});
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
こんな感じでどうでしょう
html
1<div class="parents" v-for="(rs_book,index) in rs_books" v-bind:key="index" v-on:mouseover="mouseooverfunction(index)" v-on:mouseleave="mouseleavefunction"> 2 <div class="child" :class="{ isShow:index===selectIdx }">{{rs_book}}の説明文です。</div> 3</div>
javascript
1new Vue({ 2 el: "#app", 3 data: { 4 rs_books: ["a","b","c","d","e","f","g"], //release_scheduled_books,近日発売予定の本 5 mouseStatus:"true", 6 selectIdx: null 7 }, 8 methods: { 9 mouseooverfunction(index){ 10 this.mouseStatus=true; 11 this.selectIdx = index 12 }, 13 mouseleavefunction(){ 14 this.mouseStatus=false; 15 this.selectIdx = null 16 }, 17 } 18});
css
1.child { display: none; } 2.child.isShow { display: block; }
投稿2021/06/16 04:46
総合スコア84
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/16 13:49 編集
2021/06/16 14:25