onmouseover不工作..... [英] onmouseover not working.....

问题描述

是index.html

 <   ！doctype     html  >  
 <   html  >  
 <   head  >  
 <   meta     charset   =  utf-8 >  
 <   title  >  .. :: title :: .. <   / title  >  
 <   link     rel   =  stylesheet    href   =  style.css >  
 <   link     rel   =  stylesheet    href   = 动画.css >  
 <   / head  >  
 <  正文 >  
 <  < span class =code-leadattribute> div     class   = 容器 >  
 <   div     class   =  header-top    id   =  ht >  
 <   / div  >  
 <   img     src   =  images / logo.png >  
 <   / div  >  
 <   div     class   =  header-second    id   =  hs >  
 <   / div  >  
 <   div     class   =  containerslider    id   =  slide-container >  
 <   img     id   =  next    onmouseover   ='  func（n） '    src   =  images / next.png >  
 < span class =code-keyword><   img     id   =  last    onmouseover   ='  func（l ）'    src   =  images / next.png >  
 <   / div  >  
 <   / body  >  
 <   / html  >  
 <   script  >  
 var elem = document。的getElementById（ 滑动容器）; 
 var h = window.innerHeight  -  document.getElementById（ht）。offsetHeight  -  document.getElementById（hs）。offsetHeight; 
 elem.style.height = h +px; 
 
函数func（a）
 {
 if（a ==n）
 document.getElementById（next）。style.opacity = 0.4; 
 if（a ==l）
 document.getElementById（last）。style.opacity = 0.4; 
} 
 <   / script  >  

和style.css

  @ charset utf-8; 
  / *   CSS Document * /  
 正文 {
  padding  ：  0;  
  margin  ：  0;  
} 
。 container  {
  position  ：  relative;  
  overflow  ： 可见;  
} 
。 header-top  {
  width  ：  100％;  
  background  ： < span class =code-keyword> -o-linear-gradient（＃0E105B，＃FFFFFF）;   / *  歌剧浏览器* /  
 背景 ：  -moz-linear-gradient（＃0E105B，＃FFFFFF）;   / *   fire fox浏览器* /  
 背景 ：  -webkit-linear-gradient（＃0E105B，＃FFFFFF）;   / *   safari browser * /  
 背景 ：  linear- gradient（＃0E105B，＃FFFFFF）;   / *  标准语法* /  
  height  ：  100px;  
  padding-top  ：  10px;  
} 
。 header-top   p  {
  text-align  ：  center;  
  font-size  ：  24px;  
 颜色 ： ＃E9EAF3;  
} 
。 header-second  {
  width  ：  100％;  
  background-color  ： ＃303030;  
 height  ：  60px;  
 } 
。容器  img  {
  position  ： 绝对;  
  max-width  ：  100px;  
 高度 ：  100px;  
  top  ：  80％;  
  left  ：  6％;  
} 
 。 containerslider  {
  position  ：  relative;  
  width  ：  100％;  
  height  ：  100px;  
  background-color  ：  black;  
  z-index  ：   -  1;  
} 
。 containerslider ＃ last  {
  position  ： 绝对值;  
  left  ：  6％;  
  top  ：  40％;  
  width  ：  50px;  
   -  webkit-transform  ：  rotate（180deg）;  
   -  o-transform  ：  rotate（180deg）;  
  -ms-transform  ：  rotate（180deg）;  
  transform  ：  rotate（180deg）;  
} 
。 containerslider ＃ next  {
  position  ： 绝对值;  
  right  ：  6％;  
  top  ：  40％;  
  width  ：  50px;  
} 

和animation.css

  / *   animation * /  
 < span class =code-leadattribute> @  -  webkit-keyframes   logoan1  {
 from {left ：  90％; } 
 75％{ left  ：  1％}  
 96％{left ：  6.3％; } 
 }  
  @keyframes   logoan1  {
 from {left ：  90％; } 
 75％{左 ：  1％}  
 96％{left ：  6.3％; } 
 }  
。容器  img  {
   - webkit-animation-name  ：  logoan1;  
   -  webkit-animation-duration  ：  1.5s;  
   -  webkit-animation-iteration-count  ：  1;  
  animation-name  ：  logoan1;  
  animation-duration  ：  1.5s;  
  animation-iteration-count  ：  1;  
} 

i当我将鼠标移到这两个元素上时会改变不透明度

 <   img     id   =  next    onmouseover   ='  func（n）'    src   =  images / next.png >  
 <   img     id   =   last    onmouseover  < span class =code-keyword> ='  func（l）'    src   =  images / next.png >  

但它什么都不做:(（





抱歉，如果我的英文不好:(（

解决方案

在此错误的代码，有一个合理的粮食，将附加参数传递给事件调用的有趣想法。但是你错过了一件重要的事情：第一个预期的参数是事件对象。它包含有关事件的所有信息，例如鼠标的坐标。请参阅： https://developer.mozilla.org/en-US/docs/Web/Events / mouseover [ ^ ]。



通过传递1和n，你完全搞砸了，但如果你把它作为第二个参数传递它会起作用。

因此，实际结论如下：你要么根本不传递任何参数，要么第一个参数应该是对象event（在HTML元素的调用中完全相同）， case，其他参数可以是其他任何东西。



让我用一个基于你的简单例子来说明它。这将有效：



JavaScript：

 function func（eventInstance，isNext）
 { 
  if （isNext）
 document.getElementById（  next）。style.opacity =  0 。 4 ; 
  else  
 document.getElementById（  last）。style.opacity =  0 。 4 ; 
} 

HTML：

 <   div     class   =  containerslider    id   =  slide-container >  
 <   img     id   =  next     onmouseover   =  func（event，true）    src   =  images / next.png >  
 <   img    < span class =code-attribute> id   =  last    onmouseover   =  func（event，false）    src   =  images / next.png >  
 <   / div  >  

我提供了问题的解决方案，但这并不意味着这是一个相当不错的解决方案;它只是最接近你已经拥有的，修复。这里最大的问题是你硬编码最后，下一步，1和n，这使维护成为问题。此外，您不会在JavaScript中重复使用HTML元素对象，而是使用 document.getElementById 一遍又一遍地计算它们。只做一次。此外，最好不要从HTML元素调用任何事件，也可以在JavaScript代码中执行。不要传递任何字符串，传递元素引用本身。







你的技巧附加参数是聪明的，但更优雅的解决方案不需要它，因为，或者，您可以使用一个匿名函数和闭包。

以下是我要做的事情：

  function  setupEvents（id）{
  var  element =  document  .getElementById（id）; 
 element.onmouseover =  function （eventInstance）{ //  处理程序 
  //  闭包使元素对象 
  //  外部上下文可用 
  //  延长其生命周期 
 element.style.opacity =  0 。 4 ; 
}  //   handler  
}  //   setupEvents  
 
  //   ...  
 setupEvents（  next ）;  //  依此类推......  

简单，不是吗？如果这种传递数据的方式看起来很神秘（这种行为根本不是微不足道的，并且简单易懂），你需要阅读有关闭包的内容：

http://en.wikipedia.org/wiki/Closure_(computer_programming) [ ^ ]。



匿名函数非常有价值，通常很有用在文化的JavaScript中使用，闭包很少使用，但也非常有价值，特别是对于一些优雅，优雅的解决方案。

-SA

abtin233写道：

我说鼠标悬停事件不起作用;让我来证明我的问题，并显示我的所有代码。

你做错了。



首先，证明一切都会有效（即使你的透明度动作），我创建并测试了以下100％完整演示：

 <   html  >  
 <   head  >  
 <   title  > 使用闭包测试不透明度和事件 <   / title  >  
 
 <   script  >  
 
  function  setupEvents（id）{
  var  element =  document  .getElementById（ID）; 
 element.onmouseover =  function （eventInstance）{ //  处理程序 
  //  闭包使元素对象 
  //  外部上下文可用 
  //  延长其生命周期 
 element.style.opacity =  0 。 4 ; 
}  //   mouseover handler  
 element.onmouseout =  function （eventInstance）{ //  同样的事情 
 element.style.opacity =  1 ; 
}  //   mouseout handler  
}  //   setupEvents  
 
  function  setupAll（）{ 
 setupEvents（  first）; 
 setupEvents（  second）; 
}  //   setupAll  
 
 <   /   script   >  
 
 <   / head  >  
 <   body     onload   =  setupAll（）; >  
 
 <   p  >  <   span     id   = 首先 > 在此处移动鼠标<   / span  >  
 <   span     id   =  second > & hellip;或此处<   / span  >  
 <   / p  >  
 
 <   / body  >  
 <   / html  >  

首先，尝试一下 - 它有效。请注意，为了使演示更加清晰，我还添加了另一个事件 mouseout ，让您无需重新加载页面即可反复测试事件。您可以观察两个不同的元素如何彼此分开响应鼠标事件;你可以添加任意数量的任何HTML元素，并在函数 setupAll 中添加处理程序。



我解释一下解决方案1中的想法。在您更新的代码示例中，我甚至没有看到尝试至少修复我指出的明显错误。但即使你修好它，也有一些你可能错过的微妙时刻。特别要注意的是，应该在 body 元素的 load 事件中添加事件;这很明显，但你可能会错过它，以及其他一些东西。



所以，你可以使用我的代码示例进行进一步开发，但尽量不要拧紧它了。您需要解决方案来了解您的错误以及工作原理，而不是在不理解的情况下将它们机械地包含在您的代码中。

-SA

it is index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>..::title::..</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="animation.css">
</head>
<body>
    <div class="container">
    <div class="header-top" id="ht">
    </div>
    <img src="images/logo.png">
    </div>
    <div class="header-second" id="hs">
    </div>
    <div class="containerslider" id="slide-container">
        <img id="next" onmouseover='func("n")' src="images/next.png">
        <img id="last" onmouseover='func("l")' src="images/next.png">
    </div>
</body>
</html>
<script>
var elem = document.getElementById("slide-container");
var h = window.innerHeight - document.getElementById("ht").offsetHeight - document.getElementById("hs").offsetHeight;
elem.style.height = h + "px";

function func(a)
{
if(a=="n")
document.getElementById("next").style.opacity = 0.4;
if(a=="l")
document.getElementById("last").style.opacity = 0.4;
}
</script>

and style.css

@charset "utf-8";
/* CSS Document */
body{
    padding:0;
    margin:0;
}
.container{
    position:relative;
    overflow:visible;
}
.header-top{
    width : 100%;
    background: -o-linear-gradient(#0E105B,#FFFFFF);/*opera browsers*/
    background: -moz-linear-gradient(#0E105B,#FFFFFF);/*fire fox browser*/
    background: -webkit-linear-gradient(#0E105B,#FFFFFF);/*safari browser*/
    background: linear-gradient(#0E105B,#FFFFFF);/*standard syntax*/
    height:100px;
    padding-top:10px;
}
.header-top p{
    text-align:center;
    font-size:24px;
    color:#E9EAF3;
}
.header-second{
    width:100%;
    background-color:#303030;
    height:60px;
}
.container img{
    position:absolute;
    max-width:100px;
    height:100px;
    top:80%;
    left:6%;
}
.containerslider{
position:relative;
width:100%;
height:100px;
background-color:black;
z-index:-1;
}
.containerslider #last{
    position:absolute;
    left:6%;
    top:40%;
    width:50px;
    -webkit-transform: rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform: rotate(180deg);
}
.containerslider #next{
    position:absolute;
    right:6%;
    top:40%;
    width:50px;
}

and animation.css

/*animation*/
@-webkit-keyframes logoan1{
    from{left:90%;}
    75%{left:1%}
    96%{left:6.3%;}
}
@keyframes logoan1{
    from{left:90%;}
    75%{left:1%}
    96%{left:6.3%;}
}
.container img{
    -webkit-animation-name:logoan1;
    -webkit-animation-duration:1.5s;
    -webkit-animation-iteration-count:1;
    animation-name:logoan1;
    animation-duration:1.5s;
    animation-iteration-count:1;
}

i want when i move mouse over this two elements change opacity

<img id="next" onmouseover='func("n")' src="images/next.png">
<img id="last" onmouseover='func("l")' src="images/next.png">

but it do nothing :((


sorry if i am bad in english :((

解决方案

In this wrong code, there is a rational grain, an interesting idea to pass additional parameter to the event invocation. But you missed one important thing: first expected argument is the event object. It carries all the information on the event, such as coordinates of the mouse. Please see: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover[^].

By passing your "1" and "n", you totally messed it up, but it would work if you passed it as a second argument.
Therefore, the practical conclusion is this: you either should pass no arguments at all, or the first argument should be the object "event" (named exactly like that in the call from HTML element), in that case, other arguments can be anything else.

Let me illustrate it on a simple example based on yours. This will work:

JavaScript:

function func(eventInstance, isNext)
{
    if (isNext)
        document.getElementById("next").style.opacity = 0.4;
    else
        document.getElementById("last").style.opacity = 0.4;
}

HTML:

<div class="containerslider" id="slide-container">
    <img id="next" onmouseover="func(event, true)" src="images/next.png">
    <img id="last" onmouseover="func(event, false)" src="images/next.png">
</div>

I provided the working solution of your problem, but it does not mean that this is a reasonably good solution; it's just the closest to what you already have, the fix. The biggest problem here is that you hard-code "last", "next", "1" and "n", which makes maintenance problematic. Also, you don't reuse you HTML element object in JavaScript, calculate them over and over using document.getElementById. Do it only once. Also, better don't invoke any events from HTML elements, do it also in JavaScript code. Don't pass any string, pass the element reference itself.

[EDIT]

Your "trick" with additional parameter is smart, but more elegant solution would not need it, because, alternatively, you could use one anonymous function and the closure.
Here is what I would do:

function setupEvents(id) {
    var element = document.getElementById(id);
    element.onmouseover = function(eventInstance) { // handler
        // closure makes element object
        // from outer context usable
        // by extending its lifetime
        element.style.opacity = 0.4;
    } // handler
} // setupEvents

//...
setupEvents("next"); // and so on...

Simple, isn't it? If this way of passing data looks mysterious to you (this behavior is not trivial at all, and the simplicity is deceptive), you need to read about closures:
http://en.wikipedia.org/wiki/Closure_(computer_programming)[^].

Anonymous functions are very valuable and are often used in cultured JavaScript, closures are used more rarely but are also very valuable, especially for some fine, elegant solutions.

—SA

abtin233 wrote:

I say that the event of mouseover is not working; let me to prove my question, and show all of my code.

You are doing it wrong.

First of all, to demonstrate that everything will work (even with your transparency action), I created and tested the following 100% complete demo:

<html>
   <head>
      <title>Test Opacity and Events with Closures</title>

      <script>

         function setupEvents(id) {
            var element = document.getElementById(id);
            element.onmouseover = function(eventInstance) { // handler
               // closure makes element object
               // from outer context usable
               // by extending its lifetime
               element.style.opacity = 0.4;
            } // mouseover handler
            element.onmouseout = function(eventInstance) { // same thing
                 element.style.opacity = 1;
             } // mouseout handler
         } // setupEvents

         function setupAll() {
            setupEvents("first");
            setupEvents("second");
         } //setupAll

      </script>

   </head>
<body onload="setupAll();">

<p><span id="first">Move mouse here</span>
<span id="second">&hellip;or here</span>
</p>

</body>
</html>

To start with, try it — it works. Note that to make the demo more clear I also added another event, mouseout, to let you test the events over and over without reloading the page. You can observe how two different elements respond to the mouse events separately from each other; you can add any number of any HTML elements and add the handlers in the function setupAll.

I explain the idea in Solution 1. In your updated code sample, I don't see even the attempt to fix at least your apparent bug I pointed out. But even if you fixed it, there are some delicate moments you could have missed. In particular, pay attention that the events should be added in the load event of the body element; which is obvious but you could have missed it, as well as some other thing.

So, you can use my code sample for further development, but try not to screw it up. You need the solution to understand your bugs and how things work, not to mechanically include them in your code without understanding.

—SA

这篇关于onmouseover不工作.....的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！