hover的一个实例教程-js教程-PHP中文网

首页

web前端

js教程

hover的一个实例教程

零下一度

Jul 17, 2017 pm 01:39 PM

hover实例用法

实例

选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover
{
background-color:yellow;
}

//hover,鼠标移入移出的另一种用法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>左导航特效</title><style type="text/css">* {margin: 0px;padding: 0px;font-size: 12px;}#nav .navsBox {width: 160px;}#nav .navsBox .firstNav {height:45px;line-height:45px;background-color:#EBEBEB;border-left:10px solid #FE705C;padding-left:20px;width:130px;font-weight:bold;cursor: pointer;}#nav .navsBox ul {display:none;list-style:none;}#nav .navsBox ul li {display:block;height:45px;line-height:45px;padding-left:70px;width:90px;background-color:#F2F2F2;background-position:33px 7px;background-repeat:no-repeat;}#nav .navsBox ul li.jedh {background-image:url("./images/huan.gif");}#nav .navsBox ul li.jlbbyk {background-image:url("./images/you.gif");}#nav .navsBox ul li.jwljb {background-image:url("./images/gouwu.gif");}#nav .navsBox ul li.mrljb {background-image:url("./images/meiri.gif");}#nav .navsBox ul li.vipjtj {background-image:url("./images/zhe.gif");}#nav .navsBox ul li.onbg {background-color:#F9DBD1;}#nav .navsBox ul li a {color:#000;text-decoration:none;}</style><script src="js/jquery-1.11.3.min.js?1.1.11"></script><script>$(function () {
            $(".firstNav").click(function () {var $ul= $(this).next();              if($ul.is(":visible")){
                  $ul.hide();
              }else{
                  $ul.show();
                  $ul.children().hover(function () {
                      $(this).addClass("onbg");
                  },function () {
                      $(this).removeClass("onbg")
                  })
              }
            })
        })</script></head><body><div id="nav"><div class="navsBox"><div class="firstNav">购物特权</div><ul><li class="jedh"><a href="#">全额兑换</a></li><li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li><li class="jwljb"><a href="#">购物领金币</a></li><li class="mrljb"><a href="#">每日领金币</a></li><li class="vipjtj"><a href="#">VIP阶梯价</a></li></ul></div></div></body></html>

以上是hover的一个实例教程的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

CSS小技巧：利用transition保留hover状态Sep 27, 2022 pm 02:01 PM

如何保留 hover 的状态？下面本篇文章给大家介绍一下不借助javascript保留hover状态的方法，希望对大家有所帮助！

Python中的SVM实例Jun 11, 2023 pm 08:42 PM

Python中的支持向量机（SupportVectorMachine，SVM）是一个强大的有监督学习算法，可以用来解决分类和回归问题。SVM在处理高维度数据和非线性问题的时候表现出色，被广泛地应用于数据挖掘、图像分类、文本分类、生物信息学等领域。在本文中，我们将介绍在Python中使用SVM进行分类的实例。我们将使用scikit-learn库中的SVM模

体验即飞携手哈浮X1相机的飞行之旅Jan 15, 2024 pm 02:21 PM

我们经常能够在网上看到很多精彩的俯视视角的视频，无人机拍出来的画面确实相当震撼，但其实很多人对无人机的认知很有限，例如有些地方限飞为什么还能飞？其实即开即飞的“无人机”才是当前的主流，更值得大多数人选择，今天就给大家带来哈浮飞行相机X1的上手体验。外观方面，哈浮飞行相机X1，首创折叠设计，整机仅125g，比手机轻，折叠后可以轻松手握，放进包包毫无压力。四个软性染叶和安全边框设计，完美保护拍摄安全。染叶创新采用Biobased生物基材，高弹耐用，安全环保;更有全保护边框加持，起飞降落都能贴心保护手

怎么移除css的hover事件Feb 01, 2023 am 10:06 AM

移除css hover事件的方法：1、；通过“$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })”方法绑定hover事件；2、通过“$('a').off('mouseenter').unbind('mouseleave');”方法取消绑定的hover事件即可。

VUE3入门实例：制作一个简单的视频播放器Jun 15, 2023 pm 09:42 PM

随着新一代前端框架的不断涌现，VUE3作为一个快速、灵活、易上手的前端框架备受热爱。接下来，我们就来一起学习VUE3的基础知识，制作一个简单的视频播放器。一、安装VUE3首先，我们需要在本地安装VUE3。打开命令行工具，执行以下命令:npminstallvue@next接着，新建一个HTML文件，引入VUE3：<!doctypehtml>

Python中的VAE算法实例Jun 11, 2023 pm 07:58 PM

VAE是一种生成模型，全称是VariationalAutoencoder，中文译作变分自编码器。它是一种无监督的学习算法，可以用来生成新的数据，比如图像、音频、文本等。与普通的自编码器相比，VAE更加灵活和强大，能够生成更加复杂和真实的数据。Python是目前使用最广泛的编程语言之一，也是深度学习的主要工具之一。在Python中，有许多优秀的机器学习和深度

Gin框架中的验证码使用实例Jun 23, 2023 am 08:10 AM

随着互联网的普及，验证码已经成为了登录、注册、找回密码等操作的必要流程。在Gin框架中，实现验证码功能也变得异常简单。本文将介绍如何在Gin框架中使用第三方库实现验证码功能，并提供示例代码供读者参考。一、安装依赖库在使用验证码之前，我们需要安装一个第三方库goCaptcha。安装goCaptcha可以使用goget命令：$goget-ugithub

PHP 简单网络爬虫开发实例Jun 13, 2023 pm 06:54 PM

随着互联网的迅速发展，数据已成为了当今信息时代最为重要的资源之一。而网络爬虫作为一种自动化获取和处理网络数据的技术，正越来越受到人们的关注和应用。本文将介绍如何使用PHP开发一个简单的网络爬虫，并实现自动化获取网络数据的功能。一、网络爬虫概述网络爬虫是一种自动化获取和处理网络资源的技术，其主要工作过程是模拟浏览器行为，自动访问指定的URL地址并提取所

See all articles