所以我的网站有一个问题。当我尝试对这些“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>
先谢谢。
答案 0 :(得分:0)
您的#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
。