【问题标题】:OnMouseOver / OnMouseOutOnMouseOver / OnMouseOut
【发布时间】:2014-07-21 23:47:55
【问题描述】:

我正在使用 onMouseOver 和 onMouseOut 函数来更改我的 Wordpress 网站页脚中一些社交媒体图标的颜色:http://www.retelevise.com

它工作正常,但我也使用 Javascript 的 sn-p 来链接到我的电子邮件地址(我在某处读到这是向垃圾邮件发送者隐藏地址的好方法?)——但 Javascript 没有似乎喜欢鼠标功能。

    <script type="text/javascript">
    <!--
    var addr1 = "mailto:"
    var addr2 = "info"
    var addr3 = "@"
    var addr4 = "retelevise"
    var addr5 = ".com"
    document.write('<a href="' + addr1 + addr2 + addr3 + addr4 + addr5 + '">')
    document.write('<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-1.png" onmouseover="this.src='http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-2.png'" onmouseout="this.src='http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-1.png'" class="social-icons-main" title="Email" alt="Email"></a>'); 
    //-->
    </script>

如果我删除鼠标功能,只有灰色的电子邮件图标出现,而不是在悬停时切换到彩色版本,但是当我尝试添加鼠标代码时,电子邮件图标完全消失了。我确实看过这里发布的一些类似的答案,但很抱歉我不明白它们。请问有人有什么想法吗?

谢谢, SN。

【问题讨论】:

  • 除了使用 document.write 是个坏主意之外,您并没有在this.src' 处转义'。您有一段代码,例如:document.write('...onmouseover="this.src'your string ends here) 我什至不确定您编写的其余部分会发生什么,javascript 可能会向您抛出 14 个错误。您应该使用 \' 转义 ' 字符
  • 您似乎与所有的 " 和 's 有点混淆,如果您使用单引号进行封装,请使用双引号表示里面的内容,反之亦然(这是我的经验法则)。如果您打开控制台,我很确定您的浏览器会向您发出一些 JS 错误 :)

标签: javascript wordpress onmouseover onmouseout


【解决方案1】:

在单引号值中使用的单引号没有转义。

http://jsbin.com/nakoduqa/1/edit

var addr1 = "mailto:"
var addr2 = "info"
var addr3 = "@"
var addr4 = "retelevise"
var addr5 = ".com"
document.write('<a href="' + addr1 + addr2 + addr3 + addr4 + addr5 + '">')
document.write('<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-1.png" onmouseover="this.src=\'http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-2.png\'" onmouseout="this.src=\'http://www.retelevise.com/wp-content/themes/myownzee/branding/socialmedia-email-1.png\'" class="social-icons-main" title="Email" alt="Email"></a>'); 

【讨论】:

  • 谢谢大家——你们是最棒的。还有melc,我刚刚复制并粘贴了您的代码,它运行良好。再次感谢!
猜你喜欢
  • 2023-03-03
  • 1970-01-01
  • 2012-02-04
  • 2016-12-16
  • 2015-08-27
  • 1970-01-01
  • 1970-01-01
  • 2012-09-21
  • 1970-01-01
相关资源
最近更新 更多