`
dengminghua1016
  • 浏览: 129956 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

select option,鼠标移到哪个选向就给出相应的鼠标提示

阅读更多
<style type="text/css">

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>
<script type="text/javascript">


var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip

var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
function fSelhit()
{
var hitinfo=document.all.Sel.options[document.all.Sel.selectedIndex].text ;
if (ns6||ie)
{
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=hitinfo
enabletip=true
return false
}

}

document.onmousemove=positiontip

</script>
<select id=Sel onmouseover="fSelhit()" onMouseout="hideddrivetip()">
<option>saaaaaaaaa</option>
<option>bbbbbb</option>
<option>ddddd</option>

</select>
<div onMouseover="ddrivetip('Yahoo\'s Site', 250)";
onMouseout="hideddrivetip()">This is a DIV. This is a DIV.</div>
分享到:
评论

相关推荐

    关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

    然而,在实际使用过程中,可能会遇到一些问题,比如Select下拉选项(el-option)在页面滚动时超出元素区域,以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...

    IE中鼠标经过option触发mouseout的解决方法

    本文实例讲述了IE中鼠标经过option触发mouseout的...在IE中,当鼠标移到option时 window.event.toElement 的值为null,在其他浏览器中的值为object; 当鼠标直接从DIV中移出时 window.event.toElement 的值为object,

    js解决select下拉选不中问题

    不过,在某些情况下,用户在下拉菜单上进行鼠标操作时可能会遇到一些交互问题,比如在下拉菜单弹出时,鼠标移入select内部的option元素上,会导致下拉列表消失,这就是“select下拉选不中问题”。这个问题在IE浏览器...

    jQuery超酷select选择下拉框美化特效源码.zip

    // 鼠标移到选项上时,更新显示文本 $('.options li').on('mouseover', function() { $('.select-text').text($(this).text()); }); // 点击选项后,隐藏下拉框并更新select的值 $('.options li').on('click', ...

    javascript 中select框触发事件过程的分析

    1. **focus**:当元素获得焦点时触发,例如用户通过鼠标点击或键盘操作使得输入焦点移到了`&lt;select&gt;`元素上。 2. **mousedown**:鼠标按钮被按下时触发,但此时鼠标按钮还未释放。 3. **mouseup**:鼠标按钮被释放时...

    jQuery实现两个select控件的互移操作

    每个`&lt;option&gt;`元素代表一个选项,其中`value`属性表示选项的值,而显示给用户的内容则在`&lt;option&gt;`标签体内。 2. **选择器与事件**:在jQuery中,使用特定的选择器来选中DOM元素,比如`$('#id')`选择ID为id的元素...

    VB 6.0移动窗体代码

    例如,在用户将鼠标指针移到窗体的边缘时改变其形状,提示用户可以进行大小调整操作;当用户点击并拖动窗体时,确保窗体能够平滑地跟随鼠标移动。 综上所述,通过调用Windows API函数并在适当的事件处理器中编写...

    js 200个技巧

    创建一个向上滚动的文字区域,并在鼠标悬停时停止滚动,移开后继续滚动: ```html ()" onmouseout="this.start()" height="60"&gt; &lt;!--head_scrolltext--&gt; 内容 &lt;!--endhead_scrolltext--&gt; ``` ### 9. 改变鼠标...

    selenium定义.docx

    - **鼠标移动**:使用`move_to_element(element)`将鼠标移到指定元素上。 - **隐藏元素定位**:对于不可见或隐藏的元素,需要确保它们在执行操作前可见,可能需要`click()`和`execute_script()`结合使用。 - **...

    200多个js技巧代码

    利用 `onMouseOut` 和 `onMouseOver` 事件,可以在鼠标移入和移出时改变按钮的字体颜色: ```html 确定" name="B1" onMouseOut="this.style.color='blue'" onMouseOver="this.style.color='red'" class="button"&gt; ``...

    网页开发中常用的200js代码

    鼠标移入时文本颜色变为红色,移出时变为蓝色。 #### 自定义按钮样式 ```html 提交" style="border: 1px solid #666666; height: 17px; width: 25pt; font-size: 9pt; BACKGROUND-COLOR: #E8E8FF; color: #666666" ...

    实用的31种javascript实例

    - 示例中,文字从下向上滚动,速度为1像素/次,滚动间隔为100毫秒,当鼠标悬停时停止滚动,鼠标移开时继续滚动。 #### 9. 修改鼠标悬停时的状态栏文字 可以通过`&lt;base&gt;`标签和`onmouseover`事件来修改鼠标悬停时...

    hmtl 多列选择

    jQuery提供了丰富的事件处理方法,如`.click()`, `.change()`, `.mouseover()`, `.mouseout()`等,这些可以用来响应用户的交互行为,如单击、改变、鼠标移入移出等。 5. **动态更新**: 如果需要在运行时动态添加...

    HTML期末复习题含答案.pdf

    12. 事件处理中,onMouseOver事件发生在鼠标移到元素上方,onMouseOut事件发生在鼠标离开元素,onClick是点击事件,onBlur则是在元素失去焦点时触发。 13. JavaScript的行为中,alert()函数会弹出一个带有消息的...

    关于javascript事件响应的基础语法总结(必看篇)

    例如,下面的代码展示了当鼠标移到"确定"按钮上时,会弹出一个确认对话框。 ```html 确定" type="button" value="确定" onmouseover="message()"/&gt; ``` 3. **`onmouseout`事件**:与`onmouseover`相反,当鼠标移出...

    一些常用的JavaScript总结

    15. **鼠标移到文字上触发事件**:通过`onMouseOver` 事件,可以在鼠标悬停在文字上时执行特定函数,如弹出提示框。 16. **根据网页选项改变页面颜色**:可以使用JavaScript根据用户的选择动态改变页面的背景色或...

    js技巧200多例 帮助你完成更好的js效果

    鼠标移入移出时颜色变化 为了增强交互性,可以为按钮添加鼠标悬停效果,改变其颜色。 ```html 找吧" name="B1" onMouseOut="this.style.color='blue'" onMouseOver="this.style.color='red'" class="button"&gt; ```...

    js实现下拉框菜单插件.zip

    例如,当用户将鼠标移到下拉框上时,菜单会滑出;当鼠标离开该区域时,菜单会自动收起。 2. **DOM操作**:使用JavaScript可以动态地修改HTML文档对象模型(DOM),创建、删除或修改元素。这使得我们可以根据需要...

    站长常用的200个js代码

    根据提供的文件信息,我们可以归纳和扩展出多个与前端开发尤其是JavaScript相关的知识点。下面将逐一进行详细解释。 ### 1. 文本框焦点处理 - **`onBlur` 事件**: 当用户将光标从文本框移开时触发。通常用于在用户...

Global site tag (gtag.js) - Google Analytics