对于jq实现带有二级导航的,鼠标移入移出改变css属性样式

1、布局:一级导航用ul li ,二级导航在li 里面可以嵌套div实现

<li class="pull-active">
    <a href="">资讯</a>
    <!-- 二级导航 -->
    <div class="ul ulH3">
        <div class="li">
            <a href="">活动</a>
        </div>
        <div class="li">
            <a href="">通知</a>
        </div>
        <div class="li">
            <a href="">新闻</a>
        </div>
        <div class="li">
            <a href="">政策</a>
        </div>
    </div>
</li>

2、交互:鼠标移入改变背景和字体颜色,移除去掉。

$(".pull-active").mouseover(function () {
        this.style.background = ‘#f39800‘;
        this.style.borderRadius = ‘5px‘;
        this.style.color = "white";
        $(this).children(‘.ul‘).fadeIn().css("display",‘block‘);
    }).mouseleave(function () {
        $(this).children(‘.ul‘).fadeOut().css("display", ‘none‘);
        this.style.background = ‘none‘;
        this.style.color = ‘none‘;
 });

原文地址:https://www.cnblogs.com/jervy/p/12699911.html

时间: 2024-11-08 20:38:23

对于jq实现带有二级导航的,鼠标移入移出改变css属性样式的相关文章

[读码时间] 图片列表:鼠标移入/移出改变图片透明度

说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表:鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距,去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /

函数传参,改变Div任意属性的值&amp;&amp;图片列表:鼠标移入/移出改变图片透明度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

鼠标移入/移出改变样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

鼠标移入移出改变透明度

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>鼠标移入移出改变透明度</title> 6 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" media="

React练习 5 :鼠标移入移出改变样式

需求:鼠标移入/移出div范围时,样式发生改变 import React,{useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function ChangeStyle(){ const [isHover,setHover]=useState(false); return( <div id="div1" className={isHover ? 'hov

JavaScript 入门练习2:鼠标移入移出改变 div 大小

有一个位于屏幕正中央的红色 div 正方形盒子,宽高为200×200像素,鼠标移入(悬停),正方形会变成400×400像素,鼠标移出,正方形恢复200×200像素. 使用 CSS3.JavaScript 两种方式实现. 效果如下图: 用到的知识点: 1.让盒子居中会用到 margin.padding. 2. :hover 伪类选择器.一个标签后面有一个冒号,又跟着一个东西这样的写法就叫做伪类. :hover 属于锚伪类,锚伪类分为:(以 a 标签为例) a:link {color: #FF000

鼠标移入移出事件

鼠标移入移出事件: mouseover:鼠标移入到目标元素的上方,在其子元素上时也会触发,.所以说也就是说会产生冒泡. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> .parent{height: 400px; width: 400px;border: 1px solid red;}

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

展现与收起效果(鼠标移入移出)

效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出展现与收起效果</title> <style type="text/css"> body{ margin: 0 auto; padding: 0; } #pn{ background: #