img on Hover 和 onClick 导航效果

Question

我正在开发的网站：stipz.50webs.com

附言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:- 我看到你在a 中使用了img，我想你可以删除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)');}); 
	});
});