`
lirenjiede
  • 浏览: 13651 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

html option tip message through by div

 
阅读更多

used js code like below

 

 

function dropdown_over(obj,msg,evt){
            createTips(obj,msg,evt);
        }
        function dropdown_out(obj){
            removeTips(obj);
        }
       
        function createTips(obj,msg,evt){
            var p = GetMouse(evt);
            var $tips = document.createElement("span");
            $tips.id = "tips_" + obj.id;
            $tips.innerHTML = msg;
            $tips.style.position = "absolute";
            $tips.style.left = p.x+"px";
            $tips.style.top = (p.y+16)+"px";
            $tips.style.zIndex = 1001;
            $tips.style.border = "1px solid #666";
            $tips.style.backgroundColor = "#FE0";
            $tips.style.color = "#000";
            $tips.style.fontSize = "10pt";
            $tips.style.padding = "3px;";           
            document.body.appendChild($tips);
        }
       
        function removeTips(obj){
            var $tips = document.getElementById("tips_" + obj.id);
            if($tips != null)
                document.body.removeChild($tips);           
        }
       
        function GetMouse(evt){
         evt = evt||window.event;
         return  pointer = {
          x:evt.pageX || (evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)),
          y:evt.pageY || (evt.clientY + (document.documentElement.scrollTop  || document.body.scrollTop ))
         };
        }

 

html code is like this:

 

<select id="dropdown" onmouseover="dropdown_over(this,'Tip Msg',event)" onmouseout="dropdown_out(this)">
            <option >001</option>
            <option >002</option>
            <option >003</option>
            <option >004</option>
            <option >005</option>
        </select>

分享到:
评论

相关推荐

    select option带自定义图片

    var div = $('&lt;div class="custom-option"&gt;&lt;/div&gt;'); div.css('background-image', 'url("' + opt.data('imageUrl') + '")'); div.append('&lt;span&gt;' + opt.text() + '&lt;/span&gt;'); div.data('index', index); div....

    DIV + CSS + JAVASCRIPT + 模仿 HTML中select

    在网页设计中,"DIV + CSS + JAVASCRIPT + 模仿 HTML中select"是一个常见的技术实践,目的是为了在不使用HTML原生`&lt;select&gt;`元素的情况下,通过JavaScript和CSS来创建具有相同功能和交互体验的下拉选择器。...

    Option Option Option

    Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option ...

    echarts的option

    echarts的option

    div模拟select自定义下拉列表框(jQuery)

    列表中的每一项可以用`&lt;li&gt;`元素表示,与`&lt;option&gt;`类似。 2. CSS样式:通过CSS来设计下拉框的外观,包括背景色、边框、圆角、阴影等。同时,需要设置隐藏和显示的CSS属性,以实现下拉列表的展开和收起效果。 3. ...

    使用div实现的复选选择控件

    &lt;div class="option" data-value="option1"&gt;选项1&lt;/div&gt; &lt;div class="option" data-value="option2"&gt;选项2&lt;/div&gt; &lt;!-- 更多选项... --&gt; &lt;/div&gt; ``` 接下来,引入jQuery库,利用其强大的DOM操作和事件处理功能。...

    Div 制作的SELECT

    // 创建 DIV 显示Selectd Option 值 select_info = document.createElement('div'); select_info.id = 'select_info_' + selects[i].name;//显示选中信息ID select_info.className='tag_select'; ...

    option挡住div解决方法

    Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc test0 test1 test2 test3 Div被Select挡住,是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来...

    页select中如何实现选择option其中一个选项,显示相关的内容

    ### 如何实现在`&lt;select&gt;`中选择一个`&lt;option&gt;`后显示相关的内容 #### 场景概述 根据所提供的信息,我们面临的问题是:当用户从一个`&lt;select&gt;`元素中选择一个`&lt;option&gt;`时,希望能在页面的某个区域内显示与所选`...

    select模拟div

    &lt;div class="option" data-value="option2"&gt;Option 2&lt;/div&gt; &lt;div class="option" data-value="option3"&gt;Option 3&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ``` ```css .custom-select { position: relative; } .selected-option { ...

    JS动态添加option和删除option(附实例代码)

    1.动态创建select 代码如下: ...添加选项option 代码如下: function addOption(){ //根据id查找对象, var obj=document.getElementById(‘mySelect’); //添加一个选项 obj.add(new Option(“文本”,”值”)); /

    JS动态添加Select中的Option元素值

    在JavaScript(JS)编程中,动态添加Select中的Option元素值是一项常见的需求,特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能,并提供一个实际的案例来演示这一过程。 首先,我们要理解HTML...

    div弹出层实现单选功能

    var div = $('&lt;div class="option"&gt;&lt;input type="radio" name="selection" value="' + option.id + '"&gt;&lt;label&gt;' + option.text + '&lt;/label&gt;&lt;/div&gt;'); container.append(div); }); }, error: function() { ...

    解决mysql问题identified by 'password' with grant option

    You have an error in your SQL ... check the manual that corresponds to your MySQL server version for the right syntax to use near 'identified by 'password' with grant option' mysql 5和mysql 8都有这个问题

    div 模拟下拉列表

    1. **HTML结构**:首先,我们需要构建HTML结构,这通常包括一个触发下拉显示的按钮或div,以及一个隐藏的div来存放下拉选项。例如: ```html &lt;div class="custom-select"&gt; &lt;div class="select-trigger"&gt;选择项&lt;/...

    js实现动态生成select中的option

    在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    标题"自定义带图标的select,只需把图标地址写在option的title属性中即可"揭示了这个插件的核心功能,即通过简单的配置就能实现带图标的下拉选项。 首先,让我们理解下拉框(`&lt;select&gt;`)的基本概念。在HTML中,`...

    select实现div图层切换效果(jquery实现)

    在网页设计中,有时我们需要通过不同的交互方式来切换页面上的元素显示,比如通过下拉框(select)的选择来改变div图层的展示。本示例就是利用jQuery库来实现这样的功能,使得用户在select中选择不同的选项时,对应...

    用jquery获取select标签中选中的option值及文本的示例

    根据提供的文件信息,我们可以了解到如何使用jQuery来获取HTML中select标签的选中项(option)的值(value)和文本内容(text)。以下是详细的知识点: 1. 引入jQuery库:要使用jQuery操作DOM元素,必须先引入...

Global site tag (gtag.js) - Google Analytics