位置是：固定類衝突的與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。當我向下滾動頁面時，該菜單被固定爲我想要的。但是，當我將鼠標懸停在側邊欄菜單中時，它們不會改變。如果我滾動回頁面的頂部，則在鼠標懸停時行爲再次正確。

SOLUTION：

/* 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的位置高於其他內容。

嘗試增加這樣的事情：

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

來源

2017-02-10 15:04:45 forrestmid

這很好地解決了它！謝謝 –

位置是：固定類衝突的與this.src

回答

相關問題