所以我有一个菜单栏，它基本上是一个 div 中的一组 block 。我想编写一个 jquery 脚本，当您将鼠标悬停在一个特定的 block 上时，它会更改菜单中周围 2 个 block 的类。 我想我会做一个 switch 语句来检查 $(this) id，然后更改周围的类。 我还想在我不再悬停时将类(class)改回原来的位置(就像我悬停在原类一样。
为此添加 fiddle
$(document).ready(function() {
$(".kontakt").hover(
function() {
$(".kontakt").width("30%");
$(".kontakt").css("margin-left", "35%");
$(".kontakt").append("<a>mobitel:031-535-919</a>");
$(".kontakt").append("<br><a>stacionarni tel.:01-3664-515</a><br>");
$(".kontakt").append("<br><a>email:</a><a href='mailto:sustersic_miha@hotmail.com'>sustersic_miha@hotmail.com</a><br>");
$(".kontakt").append("<br><a>Visoko 19<br>1292 Ig<br>Slovenija</a>");
},
function() {
$(".kontakt").empty();
$(".kontakt").width("10%");
$(".kontakt").css("margin-left", "45%");
$(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
});
$(".menubutton").hover(
function() {
$(this).addClass("activatedmenubutton");
switch(true){
case $(this.attr('id') === "iz"):
$("#1").addClass("activatedmenubutton");
$("#2").addCLass("activatedmenubutton");
break
}
},
function (){
$(this).removeClass("activatedmenubutton");
});
});body{
margin:0;
font-family:verdana;
background-image:url("images/background_test.jpg");
background-size:cover;
}
.topmenu {
width:90%;
margin:auto;
background-color:#3366ff;
border-radius:0px 0px 10px 10px;
text-align:center;
opacity:0.7;
}
.menubutton {
margin-top:5px;
margin-bottom:5px;
display:inline-block;
background-color:#ffffff;
font-weight:bolder;
padding:2px;
}
.activatedmenubutton {
background-color:#cccccc;
}
.menubreak {
background-color:#ffffff;
display:inline-block;
padding:2px;
}
.kontaktlabel {
font-weight:bolder;
}
.kontaktlabelbox {
background-color:#ffffff;
margin-top:6px;
margin-bottom:5px;
}
.content{
}
.kontakt{
position:absolute;
bottom:0;
width:10%;
margin-left:45%;
background-color:#3366ff;
border-radius: 5px 5px 0px 0px;
text-align:center;
opacity:0.7;
}<!DOCTYPE html>
<html>
<head>
<title>Iščem delo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="unicornsandrainbows.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</head>
<body>
<div class="topmenu">
<a class="menubreak" id="1">|</a
><a class="menubutton" id="iz">Izobrazba</a
><a class="menubreak" id="2">|</a
><a class="menubutton" id="zn">Znanja in Kompetence</a
><a class="menubreak" id="3">|</a
><a class="menubutton" id="izk">Izkušnje</a
><a class="menubreak" id="4">|</a
><a class="menubutton" id="pč">Prosti Čas</a
><a class="menubreak" id="5">|</a
><a class="menubutton" id="fo">Fotografije</a
><a class="menubreak" id="6">|</a>
</div>
<div class="content">
</div>
<div class="kontakt">
<div class="kontaktlabelbox">
<div class="kontaktlabel">Kontakt</div>
</div>
</div>
</body>
</html>所以基本上我希望当我将鼠标悬停在#iz 上时，#1 和#2 会亮起，当我将鼠标悬停在#zn 上时，#2 和#3 会亮起，依此类推......我也希望他们回到他们的位置在我不再将鼠标悬停在按钮上之后的原始类。
感谢帮助
最佳答案
试试这个。您甚至不需要开关。
$(".menubutton").hover( function() {
$(".topmenu a").removeClass("activatedmenubutton");
$(this).addClass("activatedmenubutton");
$(this).prev().addClass("activatedmenubutton");
$(this).next().addClass("activatedmenubutton");
});
关于javascript - 编写一个检查 $(this) #id 大小写的开关，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27802014/