position:fixed class conflicting with this.src

My class fixed-content appears to be stopping onmouseover from changing an images which uses src.this The 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>

The css

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

When I remove this class from the html the onmouseover works correctly.

UPDATE: This code is at https://sonjadorlas.github.io/Website/desmond.html

The sidebar menu, which contains four images should change slightly onmouseover. When I scroll down the page, this menu is fixed as I want. But when I mouseover the icons in the sidebar menu again, they do not change. If I scroll back to the top of the page, the behaviour is correct again on mouseover.

SOLUTION:

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

Thanks

Solution

I think your problem has to do with the z-index on your .fixed-content. You need to make sure that the z-index puts it's position above the other content.

Try adding something like this:

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