位置：固定クラスthis.src

マイクラス固定コンテンツはsrc.this HTML位置：固定クラスthis.src

<!DOCTYPE html> 
<html lang="en" > 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Blah</title> 
<link href="https://fonts.googleapis.com/css?family=Mada:900" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet"> 
<script src="https://use.fontawesome.com/07f9f0d505.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<link href="css/style.css" rel="stylesheet"> 
</head> 

<body> 

    <div class="container-fluid"> 
     <div class="row"> 

      <div class="fixed-content col-md-1 hidden-sm-down"> 

       <div class="row"> 
        <div class="col-md-12 firstSideMenuElement"> 
         <a href="desmond.html"><img class="sideMenu" src="images/Desmond_blank-01.png" onmouseover="this.src='images/Desmond_mouseover-01.png'" onmouseout="this.src='images/Desmond_blank-01.png'"></a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

CSS

.fixed-content{ 
    top: 0; 
    /*bottom:0;*/ 
    right: 0; 
    position:fixed; 
    overflow-y:scroll; 
    overflow-x:hidden; 
}

を使用して画像を変化させるからのonmouseover停止しているように見えるとの競合このクラスをhtmlから削除すると、onmouseoverが正しく機能します。

UPDATE：このコードは、https://sonjadorlas.github.io/Website/desmond.html

多少のonmouseover変更すべき4枚の画像が含まれているサイドバーメニュー、です。ページを下にスクロールすると、このメニューは私が望むように固定されます。しかし、サイドバーメニューのアイコンをもう一度マウスオーバーすると、変更されません。ページの一番上にスクロールすると、マウスオーバー時に再び正しく動作します。

SOLUTION：私はあなたの問題はあなたの.fixed-contentにz-indexに関係していると思います

/* SIDE BAR */ 
.fixed-content{ 
    top: 0; 
    right: 0; 
    z-index: 100; 
    position:fixed; 
    overflow-y:scroll; 
    overflow-x:hidden; 
}

おかげ

出典

2017-02-09 Shane G

あなた 'Z-index'を台無しに可能性の高い必要性：このような何かを追加すること

してみてください。 'img'要素の' z-index'を100などに設定して、その結果をお知らせください。そうでない場合は、問題を複製する手伝いをしてください。 – forrestmid

コードは正常に動作します。 http://codepen.io/anon/pen/rjqEBm問題の実証可能なデモを行ってください。 –

ありがとうございます。質問を更新しました。 –

。 z-indexが他のコンテンツの上にその位置を置くことを確認する必要があります。

.fixed-content{ 
    z-index: 10; 
}

出典

2017-02-10 15:04:45 forrestmid

それはうまく解決しました！ありがとう –

位置：固定クラスthis.src

答えて

関連する問題