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

Posted 2023-03-06

【中文标题】我无法在 div 上应用悬停效果

【英文标题】：I cannot apply hover effect on div

【发布时间】：2018-08-23 14:39:01

【问题描述】：

所以我的网站有一个问题。当我尝试在这些“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>

提前致谢。

【问题讨论】：

在 Chrome 中对我来说很好：jsfiddle.net/urq3jfaf

可以创建一个完整的工作代码来重现问题

哪种悬停效果？在导航菜单中？

对不起，我说的是这些图标的悬停效果。

【参考方案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。

【讨论】：

谢谢，它成功了。你救了我的命，伙计，再次感谢。

不客气。不要让你的生活依赖于代码。 :)