精华内容
下载资源
问答
  • html - 鼠标悬停文本内容与边框变色

    万次阅读 2017-09-26 16:08:01
    html - 鼠标悬停文本内容与边框变色<!DOCTYPE html> <html> <title></title> .demo{ border: 1px solid #ffffff;

    html - 鼠标悬停文本内容与边框变色

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                .demo{
                    border: 1px solid #ffffff;
                    width: 100px;
                    height: 100px;
                    text-align: center;
                    float: left;
                }
                .icon{
                    width: 60px;
                    height: 56px;
                    background: url(img/tb01.png) no-repeat;
                    margin: 10px auto;
                }
    
                .demo:hover{
                    border: 1px solid red;
                    cursor: pointer;
                }
    
                .demo:hover .icon{
                    background: url(img/tb02.png) no-repeat;
                }
    
                .demo:hover .font{
                    color: red;
                }
    
            </style>
        </head>
        <body>
    
            <div class="demo">
                <div class="icon">
                </div>
                <div class="font">
                    文本内容
                </div>
            </div>
    
            <div class="demo">
                <div class="icon">
                </div>
                <div class="font">
                    文本内容
                </div>
            </div>
    
            <div class="demo">
                <div class="icon">
                </div>
                <div class="font">
                    文本内容
                </div>
            </div>
    
            <div class="demo">
                <div class="icon">
                </div>
                <div class="font">
                    文本内容
                </div>
            </div>
    
        </body>
    </html>
    
    展开全文
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ color: red; } </style> </head> <body> &...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .bg{
                color: red;
            }
        </style>
    </head>
    <body>
    
        <p>我是一段文字</p>
        <p>我是一段文字</p>
        <p>我是一段文字</p>
        <p>我是一段文字</p>
    
        <script>
            var ps = document.getElementsByTagName("p")
            for(var i in ps){
            ps[i].onmouseover = function(){
                    this.setAttribute("class","bg")
                }
                //为每一个p标签添加鼠标离开事件
                ps[i].onmouseout = function(){
                        this.removeAttribute("class")
                    }
            }
    
        </script>
    </body>
    </html>

    展开全文
  • js 特效 html 特效 鼠标悬停变颜色 js 特效 html 特效 鼠标悬停变颜色
  • * { margin: 0 ; padding: 0 ; } div{ width:300px; height:50px; margin:20px; } .activeColor{ background: orange; } .odd - color{ background:#ccc; } .even ...</html>
     <style>
            *{
                margin:0;
                padding:0;
            }
            div{
                width:300px;
                height:50px;
                margin:20px;
            }
            .activeColor{
                background: orange;
                
            }
            .odd-color{
                background:#ccc;
            }
            .even-color{
                background: #eee;
            }
    </style>
    <script>
    window.onload=function(){
               var aDiv=document.getElementsByTagName("div"),
                   oldColor=" ";
               for(var i=0,len=aDiv.length;i<len;i  ){
                   if(i%2==0){
                       aDiv[i].className="even-color";
                   }else{
                       aDiv[i].className="odd-color";
                   }
                aDiv[i].onmouseover=function(){
                     oldColor=this.className;//存储原始颜色
                     this.className="activeColor";//变成激活颜色
                }
                aDiv[i].onmouseout=function(){
                    this.className=oldColor;//变成原始颜色
                }
               }
    }
    
    </script>
    </head>
    <body>
         <div>1</div>
         <div>2</div>
         <div>3</div>
         <div>4</div>
         <div>5</div>
         <div>6</div>
    </body>
    </html>

    展开全文
  • [Vue]鼠标悬停变色

    2021-10-11 22:18:05
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ...

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>test2</title>
    </head>
    <style>
        .color{
            color: rgb(43, 245, 77);
        }
    </style>
    <body>
        <div id="app">
            <ul>
                <li v-for="(i, index) in items" :class="{color: changeIndex === index}" @mouseover="changeColor(index)">{{index}}{{i}}</li>
            </ul>
        </div>
    </body>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                items: ['大肥猫', '小肥猫', '小怪兽', '大怪兽'],
                changeIndex: -1,
            },
            methods: {
                changeColor: function(index){
                    this.changeIndex = index;
                },
            }
        })
    </script>
    </html>
    

    效果

    效果

    笔记

    在v-for展开时index会在每行被赋于0123的值,这样可以通过index来确定行数。监听鼠标移入事件传入index参数,并改变changeIndex与当前鼠标所在行的index一致,通过判断changeIndex和index的值是否相等来决定是否作用css样式。

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ ...
  • jQuery实现HTML表格隔行变色及鼠标悬停变色效果
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA...
  • 鼠标经过的过渡效果图: HTML代码块: <div class="container"> <!-- 卡片 --> <div class="card"> <!-- 卡片内容 --> <div class="face face1"> <h2>hello</h2> ...
  • 如果要实现,当鼠标移到div层上时,改变其背景色,我试了好多方法,只有这个方法可行,百度上其他的似乎有问题,暂且这样说吧。
  • 这种一般是借助hover事件,就是说当鼠标放到文字上时会触发一个事件,此时可以修改文字的样式。另外一种简单的办法就是直接用css的hover属性设置样式。a.tt:hover {color: #FF0000;}------/////直接用css的hover...
  • CSS鼠标悬停图片上图片变灰 变色 半透明
  • Css 代码块 div{ width: 100px;/* 设置宽 */ height: 100px;/* 设置高 */ border-radius: 40px;/* 设置为圆角 四周圆40px 可调 越小越接近直角 */ border: 2px .../* 悬停时文字颜色设为白色 */ } Html 代码块 Demo
  • css 设置鼠标滑过变色效果

    千次阅读 2016-09-13 14:15:53
     当鼠标滑过或者悬停在图片上时,图片颜色变灰,看似是图片变灰变色效果,实际上是图片被设置为半透明样式 2.CSS样式代码:  (1)HTML代码:              业务流程        (2)css...
  • jQuery鼠标悬停图片变色放大显示效果基于jquery-1.11.1.min.js制作,鼠标经过图片,图片变色放大显示。
  • 1、javascript制作表格行高亮显示...姓名 年龄 住址 AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA 2、jQuery实现HTML表格隔行变色及鼠标悬停变色效果 ...
  • style&lt;&gt; a{ text-decoration:none; } //去掉下划线 a:hover{ background:#00F; color:#FFF } //鼠标悬停超链接变颜色
  • 本文积累了几种鼠标移入或者移出html的table表格时,表格背景色变化的几种方法。 一、利用样式CSS表达式 在样式里写表达式expression,实现鼠标经过表格行上变色,但在firefox里无效果。 完整代码如下: ...
  • 2.鼠标悬停在表格行上时变色。 一:在页面内引入jquery.js。我使用的是jquery-1.6.min.js。 二:加入如下js代码   //隔行变色 $(document).ready(function(){ $(".stripe_tb tr").mouseover...
  • 鼠标悬停,图片变色

    千次阅读 2015-08-04 15:08:54
    鼠标放在图片上,图片变色 .bg{ background-image:url(submit-bg.png); width:100px; height:80px;} .bg_hover{ background-image:url(submit-bg2.png); width:100px; height:80px;} .bg_click{ ...
  • HTML中实现鼠标经停整行(tr)变色

    万次阅读 2012-08-17 10:38:14
    在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候,要整行的背景颜色发生变化,以表明该行正中焦点,网上有一大堆这方面的代码,但是好多都还要加上一大堆得javascript代码,本人再次自己写了个...
  • 又一款鼠标悬停表格单元格,表格变色的实例效果,运用了CSS和JS两者技术的结合,因些兼容性非常好,而且易于控制,代码修改方便,跟表格读取动态数据没有任何关系,比较方便。 <html><head><title...
  • js 特效 html 特效 鼠标经过文字变色 js 特效 html 特效 鼠标经过文字变色
  • JS监听事件简单学习:  [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件"); [object].removeEvent("事件类型",... 鼠标悬停在行上的时候,触发事件,背景颜色变成红色。 效果如图: JavaScri...
  • Input 鼠标经过变色

    2019-09-23 23:47:03
    Xhtml < input id ="inp_name" class ="input_out" name ="" type ="text" onfocus ="this.className='input_on';...转载于:https://www.cnblogs.com/hm21/archive/2012/09/20/2695343.html
  • CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识。 CSS Border...
  • 1.运行效果如图所示2....DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <title>表格</title> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,491
精华内容 596
关键字:

html鼠标悬停变色