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

Question

所以我的网站有一个问题。当我尝试在这些“ikonka”div 上应用悬停效果时，它根本不起作用。我尝试将我的浏览器更改为 Mozilla Firefox，它起作用了，但不幸的是它只起作用了几次。当我尝试在 Google Chrome 的工具上手动打开悬停效果时，它起作用了。顺便说一句，我正在使用 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 .