位置:修正类与此冲突.src.

我的类固定内容似乎阻止鼠标悬停更改使用 src.this 的图像目录

 <!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 中删除此类时，鼠标悬停正常工作。

更新：此代码位于 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;
}

谢谢

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

尝试添加如下内容：

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

相关内容

最新更新

热门标签：