マイクラス固定コンテンツは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;
}
おかげ
あなた 'Z-index'を台無しに可能性の高い必要性:このような何かを追加すること
してみてください。 'img'要素の' z-index'を100などに設定して、その結果をお知らせください。そうでない場合は、問題を複製する手伝いをしてください。 – forrestmid
コードは正常に動作します。 http://codepen.io/anon/pen/rjqEBm問題の実証可能なデモを行ってください。 –
ありがとうございます。質問を更新しました。 –