悬停_悬停显示下拉列表 - CSDN
精华内容
参与话题
  • 鼠标悬停提示代码

    2019-06-24 16:34:29
    <HTML><HEAD><title>一种很酷的文字提示效果演示</title><style>.tableBorder7{width:800;solid; background-color: #000000;}TD{font-family: 宋体;...}th{backgr...

    <HTML>
    <HEAD>
    <title>一种很酷的文字提示效果演示</title><style>
    .tableBorder7{width:800;solid; background-color: #000000;}
    TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
    th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
    th.th1{background-color: #333333;}
    td.TableBody7{background-color: #B1EA45;}
    </style>
    <script language="JavaScript">
    //more javascript from
    http://www.webjx.com
    <!--
    var pltsPop=null;
    var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
    var pltsoffsetY = 15;  // 弹出窗口位于鼠标下方的距离;3-12 合适
    var pltsPopbg="#FFFFEE"; //背景色
    var pltsPopfg="#111111"; //前景色
    var pltsTitle="";
    document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
    function pltsinits()
    {
        document.onmouseover   = plts;
        document.onmousemove = moveToMouseLoc;
    }
    function plts()
    {  var o=event.srcElement;
        if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
        pltsPop=o.dypop;
        if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
        {
      pltsTipLayer.style.left=-1000;
      pltsTipLayer.style.display='';
      var Msg=pltsPop.replace(/\n/g,"<br>");
      Msg=Msg.replace(/\0x13/g,"<br>");
      var re=/\{(.[^\{]*)\}/ig;
      if(!re.test(Msg))pltsTitle="<font color=#ffffff>简介</font>";
      else{
        re=/\{(.[^\{]*)\}(.*)/ig;
          pltsTitle=Msg.replace(re,"$1")+" ";
        re=/\{(.[^\{]*)\}/ig;
        Msg=Msg.replace(re,"");
        Msg=Msg.replace("<br>","");}
        var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
             var content =
            '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">'+
            '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>↖</font>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↗</font></b></th></tr>'+
            '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
            '<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom class=th1><b><p id=botleft align=left><font color=#ffffff>↙</font>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↘</font></b></th></tr>'+
            '</table></td></tr></table>';
             pltsTipLayer.innerHTML=content;
             toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
             moveToMouseLoc();
             return true;
           }
        else
        {
          pltsTipLayer.innerHTML='';
            pltsTipLayer.style.display='none';
             return true;
        }
    }

    function moveToMouseLoc()
    {
      if(pltsTipLayer.innerHTML=='')return true;
      var MouseX=event.x;
      var MouseY=event.y;
      //window.status=event.y;
      var popHeight=pltsTipLayer.clientHeight;
      var popWidth=pltsTipLayer.clientWidth;
      if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
      {
          popTopAdjust=-popHeight-pltsoffsetY*1.5;
          pltsPoptop.style.display="none";
          pltsPopbot.style.display="";
      }
       else
      {
           popTopAdjust=0;
          pltsPoptop.style.display="";
          pltsPopbot.style.display="none";
      }
      if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
      {
        popLeftAdjust=-popWidth-pltsoffsetX*2;
        topleft.style.display="none";
        botleft.style.display="none";
        topright.style.display="";
        botright.style.display="";
      }
      else
      {
        popLeftAdjust=0;
        topleft.style.display="";
        botleft.style.display="";
        topright.style.display="none";
        botright.style.display="none";
      }
      pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
      pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
        return true;
    }
    pltsinits();

    //-->
    </script>
    </HEAD>
    <BODY>
    <a href=# title="醉别西楼醒不记,春梦秋云,聚散真容易。<br>斜月半窗还少睡。画屏闲展吴山翠。<br>衣上酒痕诗里字,点点行行,总是凄凉意。<br>红烛自怜无好计,夜寒空替人垂泪。">蝶恋花</a>

    转载于:https://www.cnblogs.com/zhangchenliang/archive/2006/12/18/595760.html

    展开全文
  • 鼠标悬停几种方法

    千次阅读 2019-01-11 16:12:50
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&...&
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.11.3.min.js"></script>
    </head>
    <body>
    <table border="1">
        <tr>
            <td title="鼠标停留显示内容1">文字内容1</td>
        </tr>
    </table><br>
    <table border="1">
        <tr>
            <td onmouseover="overShow()" onmouseout="outHide()">文字内容2</td>
        </tr>
    </table>
    <script>
        function overShow() {
            var showDiv = document.getElementById('showDiv');
            showDiv.style.left = event.clientX;
            showDiv.style.top = event.clientY;
            showDiv.style.display = 'block';
            showDiv.innerHTML = '鼠标停留显示内容2';
        }
    
        function outHide() {
            var showDiv = document.getElementById('showDiv');
            showDiv.style.display = 'none';
            showDiv.innerHTML = '';
        }
    </script>
    <div id="showDiv" style="position: absolute; background-color: white; border: 1px solid black;"></div>
    
    
    <button><span>123</span></button>
    <script>
        $(function () {
            $('button').mousemove(function () {
               $(this).attr('title','123')
            })
        })
    </script>
    
    <p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
    <ul>
        <li title="苹果汁">苹果</li>
        <li title="橘子汁" value="123">橘子</li>
        <li title="菠萝汁">菠萝</li>
    </ul>
    <script>
        $("ul li").attr("title","不吃橘子");
    </script>
    
    
    
    </body>
    </html>

    效果:

    展开全文
  • 简单的鼠标悬停效果

    千次阅读 2017-09-27 16:38:48
    charset="utf-8"> target="_blank" /> a{ color: black; text-decoration: none; /*border:solid 1px #000000;*/


    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title></title>

    <base target="_blank" />



    <style>

    a{

    color: black;

    text-decoration: none;

    /*border:solid 1px #000000;*/

    /*行内元素转块级元素*/

    display: block;

    width: 100px;

    height: 40px;

    /*文本对齐*/

    text-align: center;

    line-height: 40px;

    /*改为左浮动*/

    float: left;

    /*设置外边距*/

    margin: 10px;

    }



    /*设置鼠标悬停*/

    a:hover{

    color: #ffffff;

    background-color: #FF0000;

    }



    </style>

    </head>

    <body>



    <a href="#" class="">首页</a>

    <a href="#" class="">公司简介</a>

    <a href="#" class="">产品中心</a>

    <a href="#" class="">人才招聘</a>

    <a href="#" class="def">联系我们</a>

    </body>

    </html>

    运用简单的标签和标签样式设计自己喜欢的鼠标悬停样式:

    <a href="网址"></a>   //可以点击文本使之跳转到相应的网址。

    <style></style>中设置各个标签的样式,设置标签样式可以使用class名,例如:class="btn"

    在<style></style>中设置其样式时用 .btn{...}表示;还可以使用id名,例如:id="bn" 用 #bn{...}表示。其

    中class名可以有多个,而id名只能有一个。

    设置鼠标悬停样式:标签名:hover{...}。

    行内元素转化为块级元素(方便改变其排版样式):display:block;



    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <base target="right" />

    <style>

    body{

    margin: 0px;

    padding: 0;

    background-color: #1C2B36;

    }

    a{

    color: #869FB1;

    text-decoration: none;

    display: block;

    width: 150px;

    height: 50px;

    line-height: 50px;

    text-align: center;



    }



    a:hover{

    background-color: #131E26;

    color: #ffffff;

    }

    </style>

    </head>

    <body>



    <a href="c.html">首页</a>

    <a href="gsjj.html">公司简介</a>

    <a href="cpzx.html">产品中心</a>

    <a href="lxwm.html">联系我们</a>



    </body>

    </html>


    这是一个初级者的知识记录。

    展开全文
  • HTML代码:定义两个DIV并设置大小宽度 &lt;div id="Div1" class="div-list" style="width:20px; height:50px; border:1px solid #F00"&gt; &lt;a&...

    HTML代码:定义两个DIV并设置大小宽度

    <div id="Div1" class="div-list" style="width:20px; height:50px; border:1px solid #F00">
            <a>DIV1</a>
        </div>
          <div id="Div2" class="div-list1" style="width:20px; height:50px; border:1px solid #F00">
            <a>DIV2</a>
        </div>

    JS代码:调用Hover事件并遍历所有DIV

    <script type="text/javascript">
            $(function () { $("div").hover(function () { var id = $(this).attr("id"); alert(id); }) })
        </script>

    效果图如下:鼠标悬浮显示ID

    展开全文
  • css悬停效果View demo 查看演示Download Source 下载源The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create ...
  • css悬停效果View demo 查看演示Download Source 下载源In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create ...
  • Jquery 悬停事件

    千次阅读 2016-11-09 23:04:26
    hover事件就是鼠标悬停事件。此外,你还可以额外传递给事件处理函数一些数据。 此外,你可以为同一元素多次调用该函数,从而绑定多个事件处理函数。触发hover事件时,jQuery会按照绑定的先后顺序依次执行绑定的...
  • css实现鼠标悬停,光标出现小手

    万次阅读 2018-02-16 19:21:08
    用css 添加手状样式,鼠标移上去变小手,变小手cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style.cursor='hand'" cursor其他取值 auto :标准光标 ...
  • js——设置鼠标悬停事件

    万次阅读 2019-06-06 17:24:51
    鼠标悬停前后 function HoverAndMouseout(){ $(".zhangjie").hover( function () { $(this).css({ "width": "500px" });//移上宽度变为500 }); $(".zhang...
  • CSS3 按钮悬停(Hover)效果全集

    万次阅读 2014-09-13 22:02:39
    CSS3 按钮悬停(Hover)效果全集
  • UITableView中Header和Footer悬停方式

    万次阅读 2017-01-11 12:56:39
    一: 2个都悬停 UITableViewStylePlain  二:2个都不悬停 UITableViewStyleGrouped  以下代码都写在scrollViewDidScroll代理方法中 三:Header不悬停,Footer悬停,使用UITableViewStylePlain 这里的50是Header的...
  • css实现鼠标悬停图片放大显示

    万次阅读 2016-07-26 09:49:15
    * { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; width: 300px; margin: 0 auto; overflow: hidden; } ... display: blo
  • html div 鼠标悬停改变样式

    万次阅读 2018-05-13 14:16:18
    &lt;div class="good" onmouseover="this.className='goodchange'" onmouseout="this.className='good'"&gt;.goodchange{ background-color:#e70012;}.good background-...
  • selenium 鼠标悬停事件

    千次阅读 2017-08-22 15:50:23
    1.鼠标不仅仅可以点击(click),鼠标还有其它的操作,如:鼠标悬停在某个元素上,鼠标右击,鼠标按住某个按钮拖动; 2.鼠标事件需要先导入模块: from selenium.webdriver.common.action_chains import ...
  • 在 img 元素中添加 title 属性:
  • 鼠标悬停时图片放大_css3实例

    千次阅读 2019-01-08 09:12:24
    鼠标移到图片上时,图片会自动放大 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&... hei
  • DIV鼠标悬停显示文字

    万次阅读 2017-10-30 10:56:30
    最简洁的办法是加一个 title属性
  • Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用,函数不会在事件发生前被执行!...例1:鼠标悬停和移出显示为两种CSS
  • 效果如下: 第一步:从原件库中拖拽垂直菜单到设计页面 第二步:选中菜单,然后点击... ...第三步:在字体颜色的框中打钩选中,然后设置鼠标悬停后需要的颜色 第四步:在“选中的菜单项”前打勾,点击确定 ...
  • intellij idea设置 鼠标悬停 提示

    千次阅读 2018-11-07 16:56:03
    intellij idea设置鼠标悬停提示 一、设置 二、编辑器 三、确定后——取消最前显示 四、正常效果
1 2 3 4 5 ... 20
收藏数 57,904
精华内容 23,161
关键字:

悬停