Question

我的类固定内容似乎停止在更改使用src.this的图像上 html

 <!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;
}

当我从html中删除此类时，onmouseover正常工作。

更新：此代码位于https://sonjadorlas.github.io/Website/desmond.html

包含四张图片的侧边栏菜单应该稍微改变一下。当我向下滚动页面时，此菜单会根据需要修复。但是当我再次将鼠标悬停在侧边栏菜单中的图标时，它们不会改变。如果我滚动回到页面顶部，鼠标悬停时行为再次正确。

解决方案：

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

由于

Answer 1

我认为您的问题与z-index上的.fixed-content有关。您需要确保z-index将其位置置于其他内容之上。

尝试添加以下内容：

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

position：fixed class与this.src冲突

1 个答案: