Question

我正在处理的网站：stipz.50webs.com

P.S。 HOME暂时不做任何事

由于我已经将onhover和onmouseout部分钉入了我要添加的内容，每个div / img的导航效果让最终用户知道哪个div被点击/活动

当某个div处于活动状态时，我希望它能够更改src和onmouseout 但这意味着我必须将div / img的其余部分更改为默认值是否可以在单个函数中对多个div id进行多个声明？

如果有可能使用

，我可能会找出代码

目前正在努力：

$('#orgn').click("mouseenter", function() {
$(this).attr('src', 'elements/mp_onhover/origin_on.png');
}).on("mouseleave", function() {
$(this).attr('src', "elements/mp_onhover/origin_off.png");
});

编辑：我已经尝试过再次尝试这个，我认为它作为一个程序员真的超出了我的范围。我为它制作了一个jsfiddle，但它没有正常工作 jsfiddle link 替代链接：http://stipz.50webs.com/div_navigation.html

我尝试的是为每个div添加/删除类onClick

$("#div-origin").click( function () { $(this).addClass("ori-active"); }, function () { $(this).removeClass("ori-active"); } );

Answer 1

我认为这只能用CSS完成，请参阅此fiddle

基本的CSS，我们是游戏。

.link:link{
  text-decoration:none;
  display:block;
  width:100px;
  height:100px;
  border:1px solid #666;
  background-color:red;
}

.link:hover{
  background-color:green; 
}
.link:visited{
  background-color:blue;
}

现在我改变了那个小提琴中的color，因为我不想痛苦地将图片上传到jsfiddle。现在你可以从那里改变背景图片，不使用jquery

PS： - 我发现您在img内使用了a，我认为您可以移除img并设置a的背景图片

Answer 2

我认为这是你所期望的。我只关心你的两个链接。看看这段代码。

 <html>
    <head>
    <title></title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
    <style type="text/css">
    ul li{
      list-style-type: none;
    }
    
    ul li a{
      text-decoration: none;
      font-size: 20px;
      display: block;
      color: black;
    
    }
    
    .classOne{
      text-shadow:2px 2px 1px green;
    }
    
    </style>
    
    </head>
    <body>
    
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">CHARACTERS</a></li>
    </ul>
    
    <!-- js--> 
    <script type="text/javascript">
     $(document).ready(function(){
        $("ul li a").mouseenter(function(){
          $(this).addClass("classOne");
          });
        $("ul li a").mouseleave(function(){
          $(this).removeClass("classOne");
        });
     });
    </script>
     
    </body>
    </html>

根据需要进行更改。

Answer 3

长代码，但我已经成功实现了我想要的导航效果。

查看更新的实时网页：HERE

$(document).ready(function() 
{
$('.do').hover(
  function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
  function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});	
$('.dp').hover(
  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});	
$('.da').hover(
  function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
  function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
$('.dc').hover(
  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 	  
$('.do').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
	 $('.do').hover(
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');},
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');});	
  	 $('.dp').hover(
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});	
	 $('.da').hover(
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
   	 $('.dc').hover(
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 				
	});
$('.dp').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
	 $('.do').hover(
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});	
  	 $('.dp').hover(
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');},
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');});	
	 $('.da').hover(
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
   	 $('.dc').hover(
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 				
	});
$('.da').click(function() 
 {
  $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
  $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');
  $('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');
  $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');
	 $('.do').hover(
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
	   function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});	
  	 $('.dp').hover(
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
	   function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});	
	 $('.da').hover(
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');},
	   function() {$('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');});
   	 $('.dc').hover(
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');},
	   function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); 				
	});
$('.dc').click(function() 
{
 $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');
 $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');
 $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');
 $('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');
	$('.do').hover(
	  function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');},
	  function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');});	
	$('.dp').hover(
 	  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');},
	  function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');});	
    $('.da').hover(
	  function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');},
	  function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');});
	$('.dc').hover(
	  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');},
	  function() {$('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');}); 
	});
});

img onHover＆amp;用于导航的onClick效果

3 个答案: