每个td-li标记上的Onmouseover选项菜单
Onmouseover options menu on each td li tag
实现谷歌阅读器或Gmail的每个订阅源上存在的"右侧的onmouseover选项菜单"的最佳方式是什么?
自编码javascript+CSS?或者jQuery可以更容易地实现它吗?
示例演示
我不知道你对jQuery有多少经验。。。这是我在演示中使用的代码:
$('#nav li').hover(function(){
$('#description').hide();
$('span', this).stop(1).fadeTo(300,1);
},function(){
$('span', this).stop(1).fadeTo(300,0);
});
$('#nav span').click(function(){
var spanPosT = $(this).offset().top;
var spanPosL = $(this).offset().left;
$('#description').css({left:(spanPosL+24)+'px',top:spanPosT+'px'}).fadeTo(300,1);
});
$('#description').mouseout(function(){
$(this).hide();
});
HTML:
<div id="description"></div>
<div id="nav">
<ul>
<li>Option 1<span>+</span></li>
<li>Something 2<span>+</span></li>
<li>Else 3<span>+</span></li>
</ul>
</div>
CSS:
ul{
list-style:none;
}
#nav li{
position:relative;
width:120px;
background:#f3f3f3;
margin:3px 0;
padding:2px 10px;
color:#666;
text-shadow:0px 1px 0px #fff;
cursor:pointer;
}
#nav li:hover{
background:#eee;
}
#nav li span{
display:none;
border-left:1px solid #bbb;
position:absolute;
right:0px;
padding:0 6px;
color:#777;
}
#nav li span:hover{
background:#fff;
color:#444;
}
#description{
display:none;
position:absolute;
z-index:2;
background:#eee;
border:1px solid #777;
width:250px;
height:120px;
padding:15px;
}
如果你不知道如何在点击时用足够的内容填充区域。。。让我知道
$('element').hover(function(){
//code
});
或
$('element').on('hover', function(){
//code
});
你的意思是当鼠标在菜单上时背景颜色会改变吗?然后你可以使用CSS
例如
a:hover {
background-color: #ccc;
}
https://developer.mozilla.org/en/CSS/%3Ahover
以下是示例
HTML:
<div id="hoverable"><span id="arrow"></span>Hoverable
<ul id="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
CSS:
#hoverable
{
text-align: left;
padding:5px;
background:#eee;
border:1px solid #ddd;
width:120px;
height:30px;
position:relative;
line-height:28px;
}
#options
{
position:absolute;
display:none;
list-style:none;
background:#ddd;
width:100px;
display:none;
margin:0;
padding-left:15px;
border:1px solid #333;
color: #000;
}
#options li
{
padding: 5px 0 5px 5px
}
#arrow
{
width:15px;
height:15px;
border-radius: 3px;
background:#fff;
float:right;
margin-right:8px;
margin-top:8px;
display:none
}
jQuery:
$(function() {
$("#hoverable").on('mouseenter',
function(e) {
$(this).css({
background: '#000',
opacity: 0.8,
color: '#fff'
}).find('#arrow').show().css({
display: 'block'
});
}).on('mouseout',
function(e) {
if ($('#arrow').is(':visible') && !$('#options').is(':visible')) $('#arrow:visible').hide();
$(this).css({
background: '#eee',
opacity: 1,
color: '#000'
});
});
$('#arrow').on('click',
function() {
if ($('#options', $(this).parent()).is(':visible')) {
$('#options').hide();
} else {
$(this).parent().find('#options').show().css({
top: $(this).parent().height() + 'px',
left: $(this).position().left + 'px'
});
}
}).on('mouseenter',
function() {
$(this).show().parent().css({
background: '#000',
opacity: 0.8,
color: '#fff'
});
});
});
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- JQuery覆盖不更改单选选项
- 活动选项卡's源代码-获取变量s值
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- 如何从选择框中的选项中获取属性值
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- chrome中的onmouseover(下拉选项标记)事件不起作用-php,javascript
- 鼠标传递选项时选择标记事件/使用onmouseover选择选项
- 每个td-li标记上的Onmouseover选项菜单