我无法在 div 上应用悬停效果

Question

所以我的网站有一个问题。当我尝试在这些"ikonka"div 上应用悬停效果时，它只是不起作用。我尝试将浏览器更改为Mozilla Firefox，它起作用了，但不幸的是它只工作了几次。当我尝试在谷歌浏览器的工具上手动切换悬停效果时，它奏效了。顺便说一下，我正在使用fontello图标。这是我的 HTML：

window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

/* And my CSS: */
body {
  font-family: 'Lato', sans-serif;
  margin: 0px !important;
}
.sticky+.content {
  padding-top: 60px;
}
.sticky {
  position: fixed;
  top: 0px;
  width: 100%
}
#navbar .nav-button {
  text-align: center;
}
#navbar .nav-button a {
  width: 20%;
  float: left;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  font-size: 20;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
#navbar .nav-button a:hover {
  color: gray;
}
article content #obraski img {
  margin-top: 150px;
  width: 100%;
  height: 250px;
  opacity: 0.5;
}
article content #obraski h1 {
  font-size: 50px;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 30px;
  top: 225px;
}
#icons {
  width: 100%;
}
#icons #ikonka1:hover {
  background-color: #3b5998;
}
#icons #ikonka2:hover {
  background-color: #3b5998;
}
#icons #ikonka3:hover {
  background-color: #3b5998;
}
#icons #ikonka4:hover {
  background-color: #3b5998;
}
#ikonka1,
#ikonka2,
#ikonka3,
#ikonka4 {
  margin-top: 20px;
  height: 160px;
  float: left;
  width: 25%;
  font-size: 95px;
  text-align: center;
  vertical-align: middle;
}
/* And here is my Fontello css, but I Think it's not that important, well It might help:*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?8878417#fontello') format('svg');
  }
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-twitter:before {
  content: 'f099';
}
/* '' */
.icon-gplus:before {
  content: 'f0d5';
}
/* '' */
.icon-youtube-play:before {
  content: 'f16a';
}
/* '' */
.icon-facebook-squared:before {
  content: 'f308';
}
/* '' */
'

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Lato" rel="stylesheet">
<div id="navbar">
  <div class="nav-button"> <a href="javascript:void(0)">Home</a> </div>
  <div class="nav-button"> <a href="javascript:void(0)">News</a> </div>
  <div class="nav-button"> <a href="javascript:void(0)">Contact</a> </div>
  <div class="nav-button"> <a href="javascript:void(0)">Contact</a> </div>
  <div class="nav-button"> <a href="javascript:void(0)">Contact</a> </div>
</div>
<article>
  <content>
    <div id="obraski"> <img src="obrazek_menu.jpg">
      <h1> Gierki VR fajne ciekawe gierki bardzo ciekawe </h1>
    </div>
  </content>
</article>
<div id="icons">
  <div id="ikonka1">
    <div class="icon-twitter" style="margin-top:25px;">
    </div>
  </div>
  <div id="ikonka2">
    <div class="icon-gplus" style="margin-top:25px;">
    </div>
  </div>
  <div id="ikonka3">
    <div class="icon-youtube-play" style="margin-
    top:25px;"></div>
  </div>
  <div id="ikonka4">
    <div class="icon-facebook-squared" style="margin-
    top:25px;"></div>
  </div>
</div>

提前谢谢。

Answer 1

您的#obrasky h1具有position:absolute，这使得它#icons重叠。考虑到您当前的标记,...

#icons {
  position:relative
}

。将解决问题。

window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

body {
  font-family: 'Lato', sans-serif;
  margin: 0px;
}
.sticky+.content {
  padding-top: 60px;
}
.sticky {
  position: fixed;
  top: 0px;
  width: 100%
}
#navbar .nav-button {
  text-align: center;
}
#navbar .nav-button a {
  width: 20%;
  float: left;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  font-size: 20;
  transition: .5s;
}
#navbar .nav-button a:hover {
  color: gray;
}
article content #obraski img {
  margin-top: 150px;
  width: 100%;
  height: 250px;
  opacity: 0.5;
}
article content #obraski h1 {
  font-size: 50px;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 30px;
  top: 225px;
}
#icons {
  width: 100%;
}
#icons #ikonka1:hover {
  background-color: #3b5998;
}
#icons #ikonka2:hover {
  background-color: #3b5998;
}
#icons #ikonka3:hover {
  background-color: #3b5998;
}
#icons #ikonka4:hover {
  background-color: #3b5998;
}
#ikonka1,
#ikonka2,
#ikonka3,
#ikonka4 {
  margin-top: 20px;
  height: 160px;
  float: left;
  width: 25%;
  font-size: 95px;
  text-align: center;
  vertical-align: middle;
}
#icons {
  position: relative;
  cursor: pointer/* totally optional */
}

<div id="navbar">
  <div class="nav-button"> <a href="javascript:void(0)">Home</a> </div>
  <div class="nav-button"> <a href="javascript:void(0)">News</a> </div>
  <div class="nav-button"> <a href="javascript:void(0)">Contact</a> </div>
  <div class="nav-button"> <a href="javascript:void(0)">Contact</a> </div>
  <div class="nav-button"> <a href="javascript:void(0)">Contact</a> </div>
</div>
<article>
  <content>
    <div id="obraski"> <img src="obrazek_menu.jpg">
      <h1> Gierki VR fajne ciekawe gierki bardzo ciekawe </h1>
    </div>
  </content>
</article>
<div id="icons">
  <div id="ikonka1">
    <div class="icon-twitter" style="margin-top:25px;">
    </div>
  </div>
  <div id="ikonka2">
    <div class="icon-gplus" style="margin-top:25px;">
    </div>
  </div>
  <div id="ikonka3">
    <div class="icon-youtube-play" style="margin-
top:25px;"></div>
  </div>
  <div id="ikonka4">
    <div class="icon-facebook-squared" style="margin-
top:25px;"></div>
  </div>
</div>

---

另一个可能的解决方法是使<h1>忽略指针事件：

#obraski h1 {
  pointer-events: none;
}

这将使:hover事件通过它，#icons.