position-fixed の設定でonmouseover が反応しない

前回、htmlの表示を前後レイヤーにしてという質問をし、
position:fixed と　 position:absolute;　に分けてとアドバスを受け、うまく動作をすることができました。その節はありがとうございました。
実際には、bootstrap 設定をしているので、class= "position-fixed w-100"、class="position-absolute"
を用い、うまくいきました。

ただ、従来の前後レイヤーをひとまとめにしている内容では、onmouseover、 onmouseout　によって、隠し文字の表示、非表示設定をして動作をしていました。

しかし、今回　class= "position-fixed w-100"　側では、マウスをオーバーしても無反応です。

ちなみに参考に書いて頂いたプログラムに加筆したプログラムでは、マウスオーバーの動作は確認できました。（下にプログラムあり　（a））

bootstrapの設定を変えたりする必要があるのでしょうか？
class= "position-fixed w-100"　側ではマウスで表をドラッグできません。
class= "position-abosolute"　側ではマウスで表をドラッグできます。
ここに問題がある気がします。

実現したいこと

class= "position-fixed w-100"　側で、onmouseover、 onmouseout　などjavascriptが動作させたくよろしくお願いいたします。

###下に参考プログラムを書き込みます。（独学ですので、文法がひどくすみません。）

###参考に教示いただいたアプリで、onmouseoverなど確認できたプログラム　（a）

<style>
*{
margin:0;
}
.header{
  background-Color:gray;
  display:flex;
  position:fixed;
  height:150px;
}
.main{
  position:absolute;
  top:150px;
  height:100%;
}
.main table{
  background-Color:yellow;
}</style>

<div class="header">
<div>
<table border>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>c</td>
<td>c</td>
</tr>
</table>
</div>
<div>
<table border>
<tr>
<td>d</td>
<td>d</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>e</td>
<td>e</td>
</tr>
<tr>
<td>f</td>
<td>f</td>
<td>f</td>
</tr>
</table>
</div>
<script>
         function onmouse(){
           document.getElementById("target0").style.color = "#ff00ff";　
                   }
         function offmouse(){
           document.getElementById("target0").style.color = "#ffffff";
           }
</script>
      <div><p style="font-size: 17px;">
          <font color="#ffffff" onmouseover="onmouse()" onmouseout="offmouse()" id="target0" >AAAA</font> 　　　　
          </p>
      </div>
</div>

<div class="main">
<table border>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>

###javascriptが動作しないプログラム　一部抜粋です。

<div class= "position-fixed w-100" >
                    <div class="row">
                        <script>    
                            function onmouse11(){
                                document.getElementById("target11").style.color = "#ff00ff";
                            }
                            function offmouse11(){
                                document.getElementById("target11").style.color = "#ffffff";
                            }
                         </script>  
                   <div class="col-12  border border-light">
                         <p>       
                        <font size="3" color="#ffffff"  onmouseover="onmouse11()" 
　                  　onmouseout="offmouse11()" id="target11" >　　
                        {{test[1][2]}}</font>  　　
                        </p>
　　　　　　　　　　　　   （Bootstrap での表の表示内容なので長くなります。省略します）
                    </div>    
               </div> 
 </div> 

<div  class="position-absolute" >
         <div  class="row" >
             <form action="/" method="GET"><input type="submit" style="font-size: 15px;  
              margin-top: 700px; margin-left: 800px;" value="再入力へ">  </form>
　　　　　（動作します）
         </div>
                           {% for item in data %}
                                <tr>
                                <td>{{item[0]}}</td>
                                <td>{{item[1]}}</td>
                                </tr>
                            {% endfor %}
        
　   </div>
</div>

Lhankor_Mhy

2024/09/21 09:08

position-absolute の方はマウスポインタなどに反応しなくなっても構いませんか？

nonchan1

2024/09/21 10:21

コメントありがとうございます。はい、片方に集約します。

yambejp

2024/09/23 04:47

ソースは上下を「```」で囲んで下さい onmouseでの表示非表示切り替えはたいていcssの:hoverで代用できますがjsでの処理がマストなのでしょうか？

nonchan1

2024/09/23 05:49 編集

ありがとうございます。マストではないですが、cssを使ってないので。海外のサイトを含め調べましたが、Bootstrap で　position-fixed　の内容見つからず諦めたほうがいいかなと思ったりしております。

nonchan1

2024/09/23 09:48

部分的に削除しましたが、おおよそ下記の内容を加えると、 <div class="position-absolute"> の下のプログラム（bootstrap で作成した表）に当たる　下？レイヤー　以下の内容が表示はされますがactive　になりません。なので、mouseover　も認識しません。 ``` <div class="position-absolute" > {% if data == [] %} <p> </p> {% else %} <table border="1" style= "background-Color:#DDDDDD; margin-left: 600px;" > {% for item in data %} <tr> <td>{{item[0]}}</td> <td>{{item[1]}}</td> <td>{{item[4]}}</td> <td>{{item[5]}}</td> <td>{{item[6]}}</td> <td>{{item[9]}}</td> </tr> {% endfor %} </table> {% endif %} </div> ```

行動規範の内容に同意します

回答2件

こうするとどうでしょうか。

css
1.position-absolute {
2    pointer-events: none;
3}

class名は適宜設定してください。

投稿2024/09/24 00:53

Lhankor_Mhy

総合スコア36896

とりあえず:hoverの使い方・・・基礎中の基礎なのでもしご存じないのであれば初心者向けのCSSの解説サイトを見ておいたほうがよいでしょう

html
1<style>
2.wrap{font-size: 17px;background-Color:gray;}
3#target0{color:#ffffff;}
4#target0:hover{color:#ff00ff;}
5</style>
6<div><p class="wrap">
7<font id="target0" >AAAA</font> 　　　　
8</p>
9</div>

投稿2024/09/23 05:58

yambejp

総合スコア116443

nonchan1

2024/09/23 07:29

position-fixed, position-absolute に区切らないときは、小生の書き方でonmouseover,onmouseout でフォントカラーも変わるんです。それに上記に記した短いプログラムも問題なく。とにかく、二例も、実際動作世帯プログラムで、class position-fixed 側の作表が無反応なんです。提示いただいた内容に変えてみましたが無反応でした。ありがとうございます。

yambejp

2024/09/23 07:54

とりあえず提示されているソースではHTMLの再現ができません HTMLで質問するか、どこかHTMLが確認できるサイトを提示ください

nonchan1

2024/09/24 11:30 編集

html すべてを表示します。（ただ影響ないように確認しつつ、重複する内容は削除しました。）ただこの削除で分かったのは、position-absolute の表がonmouseover,の個所に縦位置でかぶらないと動作（認識）するようです。 900～の下にマウスを持っていくと表示が変わりますが、コメント分を追加すると反応しなくなります。 position-absolute で表示している表が横に10列あるので、縦位置に重なりこの解決は難しいとは思いますがよい方法あればよろしくお願いいたします。（margin-right,left　位置を変えましたが解決しませんでした。） ``` <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>四柱推命</title> </head> <body> <div class= "position-fixed w-100" > <script> function onmouse(){ document.getElementById("target0").style.color = "#ff00ff"; } function offmouse(){ document.getElementById("target0").style.color = "#ffffff"; } </script> <div><p style="font-size: 17px;">　名前:{{session['name']}}　　　　　　　性別:　{{sex}} <font color="#000000" onmouseover="onmouse()" onmouseout="offmouse()" id="target0" >　{{meisiki_nattin}}　OOOPPP{{tensisatuGENaray[0]}} {{tensisatuaray[0]}}　　{{tensisatuGENaray[1]}} {{tensisatuaray[1]}}</font> </p> </div> <div class="container-fluid " > <div class="row" > 　生年 <div class="col-1 border border-secondary pt-2" align="center" > <p style="font-size: 35px; color: black;" > PPPP </p> <div class="row"> <div class="col-12 border border-light" style="color:red" > QQQQ<br> </div> </div> </div> <div class="col-sm-1 border border-secondary pt-2" align="center"> <p style="font-size: 35px; color: black;"> RRRR</p> <div class="row"> <div class="col-12 border border-light" style="color:red"> SSSS<br> </div> </div> </div> <div class="col-sm-1 border border-secondary pt-3 " align="center"> <p style="font-size: 27px; color: black;">MMMM</p> <p> <font size="1" color="#ffffff" >UUUU</font></p> </div> <div class="col-sm-1 border border-secondary pt-3" align="center"> <p style="font-size: 27px; color: black;">WWWW</p> <div > <p style="font-size: 20px; color: red;" align="left">ZZZZ</p> </div> </div> <div class="col-2 border border-secondary" style="color:red"> BBBB<br> <div class="row"> <div class="col-12 border border-light" style="color:red"> HHHH<br> <div class="row"> <div class="col-12 border border-light"style="color:black"> KKKK<br> <div class="row"> <div class="col-12 border border-light"> FFFF<br> </div> </div> </div> </div> </div> </div> </div> 大 <div class="col-1 border border-secondary"> 900~ <br> <div class="row"> <script> function onmouse11(){ document.getElementById("target11").style.color = "#ff00ff"; } function offmouse11(){ document.getElementById("target11").style.color = "#ffffff"; } </script> <div class="col-12 border border-light"> <p> <font size="3" color="#00000" onmouseover="onmouse11()" onmouseout="offmouse11()" id="target11" > JJJJ</font> </p> <div class="row"> <div class="col-12 border border-light"> <div class="row"> 1000~ <div class="col-12 border border-light"> <font size="3" color="#000000" >TEST</font> </div> </div> </div> </div> </div> </div> </div> <div class="col-1 border border-secondary"> AAA <div class="row"> <div class="col-12 border border-light"style="color:red"> BBB <div class="row"> <div class="col-12 border border-light" style="color:black"> CCC <div class="row"> <div class="col-12 border border-light"style="color:red"> DDD </div> </div> </div> </div> </div> </div> </div> <div class="col-2 border border-secondary"style="color:red"> EEE <div class="row"> <div class="col-12 border border-light"style="color:black"> FFF <div class="row"> <div class="col-12 border border-light"style="color:red"> GGG <div class="row"> <div class="col-12 border border-light" style="color:black"> HHH </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="position-absolute" > <form action="/" method="GET"><input type="submit" style="font-size: 15px; margin-top: 500px; margin-left: 600px;" value="再入力へ"> </form> <br> <table border="1" style= "background-Color:#DDDDDD; margin-left: 600px;" > <tr> <th>年</th> <th>年干支</th> <th>納音</th> </tr> <tr> <td>AAAA</td> <td>BBBB</td> <td>CCCC</td> <td>AAAA</td> <td>BBBB</td> <td>CCCC</td> <td>AAAABBB</td>  </tr> </table> </div>   <script> src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" </script> </body> </html> ```

行動規範の内容に同意します

あなたの回答