0
我想有类.socialtrans2更换类.socialtrans当类.navbg通过JavaScript函数addnavbg增加，而当类.navbg被删除还原这些更改替换类，但我不知道如何。添加类的下滚，当类添加
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a class='regular' href='index.html'>Beatstore</a></li>" +
"<li><a class='regular' href='drums.html'>Drumkits</a></li>" +
"<li><a class='regular' href='mixing.html'>Mixing</a></li>" +
"<li><a class='regular' href='tutorials.html'>Tutorials</a></li>" +
"<li><a class='regular' href='about.html'>About</a></li>" +
"<li><a class='social' href='instagram.html'><span class='socialtrans'></span><img src='graphics/Instagram_App_Large_May2016_200.png' alt='instagram'></a></li>" +
"<li><a class='social' href='youtube.html'><span class='socialtrans'></span><img src='graphics/YouTube-logo-full_color.png' alt='youtube'></a></li>" +
"<li><a class='social' href='soundloud.html'><span class='socialtrans'></span><img src='graphics/soundcloud-icon.png' alt='soundcloud'></a></li>"
"</ul>";
function setActive() {
aObj = document.getElementById('nav01').getElementsByTagName('a');
for (i = 0; i < aObj.length; i++) {
if (document.location.href.indexOf(aObj[i].href) >= 0) {
aObj[i].className = 'active';
}
}
}
window.onload = setActive;
window.onscroll = function() {
addnavbg()
};
function addnavbg() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
document.getElementById('menu').className = 'navbg';
} else {
document.getElementById('menu').className = '';
}
}/* navigation */
ul#menu {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height: auto;
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
transition: background-color 0.2s linear;
}
.navbg {
background-color: #424242;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: transparent;
font-weight: bold;
text-decoration: none;
color: #000000;
display: inline-block;
padding: 10px 16px;
transition: color 0.2s;
}
ul#menu li a:hover {
background-color: transparent;
font-weight: bold;
color: #FF0000;
}
ul#menu a.regular:link {
padding-top: 15px;
}
ul#menu li a.active {
color: #ff0000;
}
/* social media links */
ul#menu a.social:link {
border: 0;
height: 30px;
width: 30px;
float: right;
}
ul#menu a.social.link:hover {
display: inline-block;
}
span.socialtrans {
position: fixed;
width: 30px;
height: 30px;
float: right;
opacity: 0;
transition: opacity 0.2s;
}
span.socialtrans:hover {
background-color: #ffffff;
opacity: 0.7;
}
span.socialtrans2 {
position: fixed;
width: 30px;
height: 30px;
float: right;
opacity: 0;
transition: opacity 0.2s;
}
span.socialtrans2:hover {
background-color: #424242;
opacity: 0.7;
}<div id="nav01"></div>
如果我理解你，那么这应该仍然有效。在我的例子中，这两个CSS案例不会同时发生。定义越多，您拥有的id类和类型越多，优先级就越高。 – curtainrising
事情是socialtrans在社交链接上放置了一个白色bg（它们是图像链接），它们因为悬停而消失，而社交转换2应该在它上面放一个灰色的标记，因为navbg是灰色的，我不想让小白色在我的社交链接上方格。 – Ken
非常感谢你的解决方案帮助我解决了这个问题。 – Ken