浅谈前端中的onmouseover 事件

news/2024/5/10 2:21:38/文章来源:https://blog.csdn.net/weixin_36171533/article/details/68953688

修改别人的模板遇到一个问题,分类图的切换默认是五个,我想增加四个,一直没有增加成功。它使用的onmouseover 事件。

去查了一下:

定义和用法

onmouseover 事件会在鼠标指针移动到指定的对象上时发生。

语法

οnmοuseοver="SomeJavaScriptCode"
参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, 
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, 
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, 
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, 
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, 
<tr>, <tt>, <ul>, <var>

支持该事件的 JavaScript 对象:

layer, link

实例 1

在下面的例子中,我们将在用户把鼠标指针移动到图像上时显示一个对话框:

<img src="/i/eg_mouse2.jpg" alt="mouse"
onmouseover="alert('您的鼠标在图片上!')" />

输出:(请把鼠标移动图片上):

Visit W3School!

鼠标放上去会切换另外一个图。

演示;http://www.w3school.com.cn/tiy/t.asp?f=hdom_onmouseout


附上代码:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>
</head>


<body>
<a href="http://www.w3school.com.cn" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>


我的业务代码:

<div class="wscp_t"> 
    {dede:type typeid=11}<a href="[field:typelink/]" class="wscp_on" id="wscp_1" οnmοuseοver="tabname1('wscp_','wscp_a','1','9','wscp_on','wscp_off');" >[field:typename/]</a> {/dede:type}
    {dede:type typeid=12}<a href="[field:typelink/]" class="wscp_off" id="wscp_2" οnmοuseοver="tabname1('wscp_','wscp_a','2','9','wscp_on','wscp_off');">[field:typename/]</a> {/dede:type}
    {dede:type typeid=13}<a href="[field:typelink/]" class="wscp_off" id="wscp_3" οnmοuseοver="tabname1('wscp_','wscp_a','3','9','wscp_on','wscp_off');">[field:typename/]</a> {/dede:type}
    {dede:type typeid=14}<a href="[field:typelink/]" class="wscp_off" id="wscp_4" οnmοuseοver="tabname1('wscp_','wscp_a','4','9','wscp_on','wscp_off');">[field:typename/]</a> {/dede:type}
    {dede:type typeid=15}<a href="[field:typelink/]" class="wscp_off" id="wscp_5" οnmοuseοver="tabname1('wscp_','wscp_a','5','9','wscp_on','wscp_off');">[field:typename/]</a>{/dede:type} 
{dede:type typeid=16}<a href="[field:typelink/]" class="wscp_off" id="wscp_6" οnmοuseοver="tabname1('wscp_','wscp_a','6','9','wscp_on','wscp_off');">[field:typename/]</a>{/dede:type}
{dede:type typeid=19}<a href="[field:typelink/]" class="wscp_off" id="wscp_7" οnmοuseοver="tabname1('wscp_','wscp_a','7','9','wscp_on','wscp_off');">[field:typename/]</a>{/dede:type}
    {dede:type typeid=20}<a href="[field:typelink/]" class="wscp_off" id="wscp_8" οnmοuseοver="tabname1('wscp_','wscp_a','8','9','wscp_on','wscp_off');">[field:typename/]</a>{/dede:type} 
</div>


代码结束。其中:,'wscp_a','1','9'  代表的意思是1,第一个,9,一共九个


下面就是调用的html:

  <div class="wscp_c" id="wscp_a1" style="display:block;">
    <ul>
      {dede:arclist row=4 typeid=11}
      <li> <a href="[field:arcurl/]" title="[field:title/]"><img src="[field:litpic/]"  alt="[field:title/]" title="[field:title/]" width="262" height="325"/></a>
        <p><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></p>
      </li>
      {/dede:arclist}
    </ul>
  </div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_846562.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker系列器十:docker-compose和网站的负载均衡

Docker应用中&#xff0c;为了达到高可用&#xff0c;可以做很多的web服务&#xff0c;保持服务的稳定性&#xff0c;在web的出口处是haproxy等负载应用。 命令&#xff1a; 在和yml文件的同文件下&#xff0c;执行任何的docker-pose的命令&#xff0c;否则是提示找不到文件的…

大型网站系统架构的演化

http://www.cnblogs.com/leefreeman/p/3993449.html 前言 一个成熟的大型网站&#xff08;如淘宝、京东等&#xff09;的系统架构并不是开始设计就具备完整的高性能、高可用、安全等特性&#xff0c;它总是随着用户量的增加&#xff0c;业务功能的扩展逐渐演变完善的&#xff0…

软件体系结构---优酷网站架构分析

1.web环境下架构特性 可扩展、可靠、简单核心、模块化 2.优酷网站分析 1)前端框架 模块分离、前端可扩展、分层UI分离 2&#xff09;存储结构 在体系结构上&#xff0c;优酷网采用分布式的结构&#xff0c;服务器和存储设备分布在全国各地&#xff0c;用户就近访问&#xff0c;…

大型网站架构系列:分布式消息队列(一)

以下是消息队列以下的大纲&#xff0c;本文主要介绍消息队列概述&#xff0c;消息队列应用场景和消息中间件示例&#xff08;电商&#xff0c;日志系统&#xff09;。本次分享大纲消息队列概述消息队列应用场景消息中间件示例JMS消息服务&#xff08;见第二篇&#xff1a;大型网…

JS基础17-网站效果

一、鼠标移入触发显示框和更改属性 要实现的效果 window.οnlοadfunction(){ //获取到div框里的li数组var oToplistdocument.getElementById(top-list);var oToplistlioToplist.getElementsByTagName(li);var oPulldocument.getElementById(pull-down);//鼠标移入时&#xff0…

Python_记一次网站数据定向爬取实现

记一次网站数据定向爬取实现 by:授客 QQ&#xff1a;1033553122 测试环境&#xff1a; Python版本&#xff1a;Python 3.4 Win7 请勿用于商业及非法用途&#xff0c;仅供学习研究用&#xff0c;否则后果自负 数据爬取场景 如下&#xff0c;打开网站查询页面&#xff0c;输入关…

大型网站架构演变和知识体系

之前也有一些介绍大型网站架构演变的文章&#xff0c;例如LiveJournal的、ebay的&#xff0c;都是非常值得参考的&#xff0c;不过感觉他们讲的更多的是每次演变的结果&#xff0c;而没有很详细的讲为什么需要做这样的演变&#xff0c;再加上近来感觉有不少同学都很难明白为什么…

v2013调试无法访问此网站 localhost 拒绝了我们的连接请求

问题描述&#xff1a; 别人给的服务器代码&#xff0c;在本地部署以后调试的&#xff0c;localhost&#xff1a;8080 可以访问&#xff0c;localhost:2524访问不了需要改什么配置吗 解决思路&#xff1a; 这种只能在服务器上访问&#xff0c;可能端口号2524…

如何优化您的网站以提高速度

大家好&#xff01; 今天&#xff0c;我们有一个来宾帖子&#xff0c;介绍有关如何加快网站速度的一些提示&#xff01; 他目前正在一家电子商务网站上工作&#xff0c;他的任务之一是使网站快速加载。 因此&#xff0c;请在下面阅读&#xff01; 〜迈克 网站速度已成为诸如Go…

如何优化程序提高运行速度_如何优化您的网站以提高速度

如何优化程序提高运行速度大家好&#xff01; 今天&#xff0c;我们有一个来宾帖子&#xff0c;介绍有关如何加快网站速度的一些提示&#xff01; 他目前正在一家电子商务网站上工作&#xff0c;他的任务之一是使网站快速加载。 因此&#xff0c;喜欢在下面阅读&#xff01; 〜…

网站托管平台_托管Kubernetes平台综述

网站托管平台在容器协调器的竞争中&#xff0c;Kubernetes不断前进。 但是&#xff0c;就像我在Docker主机上撰写我的文章时一样&#xff0c;人们经常被困在将基础架构投入生产的步骤上。 与我最初写这篇文章时不同&#xff0c;该行业取得了长足的发展&#xff0c;正如您将看到…

PHP的网站主要攻击方式有哪些?

1、命令注入(Command Injection) 2、eval注入(Eval Injection) 3、客户端脚本攻击(Script Insertion) 4、跨网站脚本攻击(Cross Site Scripting, XSS) 5、SQL注入攻击(SQL injection) 6、跨网站请求伪造攻击(Cross Site Request Forgeries, CSRF) 7、Session 会话劫持(Session …

Xshell命令行学习,宝塔创建网站

参考链接 &#xff1a;https://blog.csdn.net/u014074697/article/details/86241642 宝塔创建面板-在安全组新添加一个端口 浏览器输入Bt-panel网址&#xff0c;登入用户名和密码即可进入

curl网站开发指南

整理curl命令&#xff1a; curl www.sina.com curl -o [文件名] www.sina.com curl -L www.sina.com curl -i www.sina.com curl -I www.sina.com curl -v www.sina.com curl --trace output.txt www.sina.com curl --trace-ascii output.txt www.sina.com php-curl这个库也不…

电商购物网站(登陆注册购物车详情页等)(仿jd)

电商购物网站&#xff08;仿jd&#xff09; 源码链接&#xff1a; https://gitee.com/ZRXXUAN/shopping https://github.com/ZRXXUAN/shopping 介绍 仿照jd写的电商购物网站 可以实现基本功能&#xff0c;登录、注册与数据库交互&#xff0c;购物车&#xff0c;详情页&…

BS4+Openpyxl循环爬取114网站黄页信息存入excel + tinker界面输入(开源代码)

使用beautifulSoup框架爬取114黄页数据。 代码开源在gitee地址: https://gitee.com/aismarter/ScrapySpider_bs4_openpyxl_tinker github地址&#xff1a; https://github.com/Aismarter/ScrapySpider_BS4_openpyxl_tinker 分析网站 首先打开网页&#xff0c;分析爬取网页的…

简易购物网站JSP

下载源码 开发工具&#xff1a; 1.myeclipse2014 2.SQLServer2012 开发思路&#xff1a; 开发思路及过程请详看附件内开发文档 项目构造: 数据库说明&#xff1a; 需创建一个数据库(shopDB)&#xff0c;三个表(users、goods、shopCart)&#xff0c;空表即可&#xff0c;后…

宝塔部署java项目建站最全爬坑博客-为啥叫最全,因为我爬的坑最多

1.首先你要有阿里云域名,然后在阿里云上解析A类你的域名,这就不多说了 2.进入宝塔面板后,你要先安装环境,最好是编译安装,因为求稳,急速安装不稳定,但是像tomcat这类app程序没有编译安装哦 环境如果都安装好了,那么我们就开始配置项目了 首先,要看我们需要运行的项目是什么,…

Java-POI大数据分析 -实体店选址POI数据分析-5天,多网站爬虫数据融合处理

实体店选址大数据分析-保定地区-POI数据-powermap-爬虫获取真实数据讲一下项目的思路 预期通过获得poi数据进行分析,以为实体店选址进行决策 数据源 58同城店铺转让数据 安居客小区详细信息数据 安居客小区平均房价数据 上爬虫代码 package wubaSpider;import java.io.FileO…

网站漏洞扫描工具AWVS相关问题——Access Denied for your user role. Contact your Administrator.

在AWVS登录用户后&#xff0c;在选择自己要使用的功能时会出现“Access Denied for your user role. Contact your Administrator.”问题&#xff0c;即“拒绝访问您的用户角色。请与管理员联系。” 此问题的出现是由于在软件处于未激活状态所致。 解决方案&#xff1a; 1、AW…