body{
font-family:"Arial","Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:450px;
padding:14px;
}
/* ----------- regForm ----------- */
#regForm{
border:solid 2px #b7ddf2;
background:#A9D0F5;
}
#regForm h1 {
font-size:18px;
font-weight:bold;
margin-bottom:8px;
}
#regForm p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#regForm label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#regForm .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#regForm input{
float:left;
font-size:100%; …以下是我在此页面上使用的代码:此处
$(document).ready(function(){
$('.jcarousel-skin-tango a').hover(
function() {
$(this).find('.rollover').stop().fadeTo(500, 1);
},
function() {
$(this).find('.rollover').stop().fadeTo(500, 0);
}
)
});
问题出在IE 8及以下版本中.当您将鼠标悬停在任何幻灯片图像上时,悬停会变为黑色(因为IE不支持"不透明度").我基本上需要一种新的编写方式,以便在IE中没有灰色/黑色框的情况下实现相同的效果.有任何想法吗 ？
我目前正在考虑一些效率/速度问题.
我有大约40个元素和div嵌套在li中
<ul id=ul>
<li><a href="#">Link</a><div>Text</div></li>
<li><a href="#">Link</a><div>Text</div></li>
<li><a href="#">Link</a><div>Text</div></li>
<li><a href="#">Link</a><div>Text</div></li>
<li><a href="#">Link</a><div>Text</div></li>
....
</ul>
在所有的李,我有悬停事件附加
$('#ul li').hover(function(e){
$(this).children(div).show();},
function(){
$(this).children(div).hide();
})
我想知道是否有更好的方法,而不是将40个事件处理程序附加到dom上进行悬停事件.我认为在某些浏览器中这可能会很慢.
我听说过DOM遍历,比如当你在#ul容器上只放置一个处理程序并让dom在浏览器中遍历时(e.target)找出已经悬停的元素.有人知道如何解决这个问题吗？
影响:
带有文本的悬停框和当您将鼠标悬停在TD元素上时出现的按钮.在IE 7中,该框将出现,但只要您尝试将鼠标悬停在它上面就会消失.IE8 +/FF/Ch/Sf都允许你将孩子DIV悬停在罚款上.我究竟做错了什么？
简单代码:
CSS
td {
position:relative;
width:30px;
}
.hovering_box {
display:none;
position:absolute;
margin-left:25px;
}
td .slot:hover .hovering_box {
display:block;
}
.hovering_box:hover {
display:block;
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<table>
<tr>
<td class='slot'>
<div class='hovering_box'>
<span class='box_title'>Title Here</span>
<span class='box_message'>Help me!</span>
<button>OK!</button>
</div>
</td>
</tr>
</table>
</html>
有没有可能有纯粹的CSS(而不是javascript)这个:
<ul>
<li>a</li>
<li>b</li>
</ul>
<div id="x" style="display:none;">c</div>
显示<div>我何时悬停<li>？
大家好,希望有人可以帮助我.
我在页面上有一系列照片,当您将鼠标悬停在页面上时,白色的效果渐渐消失,标题和说明会显示在其上方.
我遇到的问题是,如果我将鼠标悬停在文本区域上,则白色效果会再次淡出.这是一个奇怪的闪烁问题.
我需要它才能工作,这样无论你在哪里悬停在图像上,它总是保持着色,然而当它关闭时它又回到了正常的图像.
我正在努力学习编码,所以对我来说很光.我在其他帖子中发现了类似的问题,但无法确定他们的建议如何应用于我的代码.
我的代码如下.
$('div.project-image a img').mouseover(function() {
$('div.hover').css('filter', 'alpha(opacity=70)');
$('div.hover', $(this).parent().parent()).fadeIn(500);
});
$('div.hover').mouseout(function() {
$('div.hover').css('filter', 'alpha(opacity=70)');
$('div.hover', $(this).parent().parent()).fadeOut(500);
});
$('div.hover').bind('click', function(e) {
window.location = $(this).parent().children('a').attr('href');
});
使用的CSS样式是:
#content div.project-image (styles the image area)
#content div.hover (displays the white tinted image)
#content div.hover h1 (styles the title)
#content div.hover p (styles the description)
我正在开发一个使用大量图像按钮进行重定向的系统......但是,每当你将光标放在按钮上时,我希望按钮显示一点点消息...
例如,当您将光标悬停在将您重定向到Schedule上的按钮上时,会出现一条显示"Schedule"的消息.这样,用户可能无法识别图片,但当他将鼠标悬停在按钮上时,他会知道他将被重定向到哪里...
希望你能帮我
我有一个悬停的问题.它们在IE中运行良好,但不适用于Mozilla Firefox或Chrome.我猜它是因为它相当模糊,每一个td但是现在这就是我需要的东西.这是小提琴(不工作)http://jsfiddle.net/233qG/提前谢谢.
HTML
<table>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
</table>
<div class="modalPop">Modal Information</div>
CSS
div.modalPop
{
display:none;
position:absolute;
border:solid 1px black;
padding:8px;
background-color:white;
margin: 280px 50px 0 0;
z-index: 9999;
}
a.modalPop:hover + div.modalPop
{
display:block;
}
div.modalPop:hover
{
display:block;
}
jQuery
$(document).ready(function(){
$('td').hover(
function(){$('.modalPop' + this).stop().hide().fadeIn('slow');},
function(){$('.modalPop' + this).stop(true, true).fadeOut('slow');}
);
});
我正在尝试使div成为链接，并且此方法有效，不确定我是否正确完成了操作。但我也希望div中的类型更改颜色。谁能帮我，如果您能解释一下，我会很高兴的：D尝试学习:)
这是HTML
<div class="song_feature">
<a href="#"></a>
<div class="song_feature_content">
<div class="break32"></div>
<h1>1</h1>
<div class="break10"></div>
<div class="break45"></div>
<h2>Lorem ipsum title</h2>
<div class="break10"></div>
<p>lorem ipsum</p>
</div>
</div>
和CSS
.song_feature:hover {
background-color: #B5B5B5;
cursor: pointer;
}
我本周开始的风格表开发较少.
我目前的项目有很多不同颜色的链接,如:
#dev-team a {
color: #D09EBA;
}
#admin-team a {
color: #0C3FDA;
}
#test-team a {
color: #009FD1;
}
...
我正在做的是添加一个悬停颜色,使标准的颜色变得如此:
#dev-team a {
color: #D09EBA;
&:hover{
lighten(#D09EBA, 7%);
}
}
#admin-team a {
color: #0C3FDA;
&:hover{
lighten(#0C3FDA, 7%);
}
}
...
我想知道是否可以使用更少的mixin或更少的函数来避免为每个不同的颜色链接写一行,比如分解.
hover ×10
css ×7
jquery ×4
html ×3
css3 ×2
asp.net ×1
c# ×1
flicker ×1
html-table ×1
imagebutton ×1
javascript ×1
less ×1
nested ×1