我在页面上有一些按钮,其颜色通过jQuery更改,说明哪一个是活动的.我只想在悬停时添加颜色更改,之后它会在离开时返回到原始颜色(由jQuery决定).
我首先使用css:.showlink li:hover {color:#aaa;}除了当切换页面并且jQuery改变颜色时它适当地工作,它超过了CSS.
然后我决定使用简单的jQuery来说明什么东西在徘徊时,改变它的颜色.这不完全有效,因为它会永久改变颜色.为了缓解这种情况,我在函数中添加了一些函数,将函数返回到不同的颜色.
有什么方法可以在悬停时更改之前将其恢复为原始颜色？
// Changes color on hover
$(function() {
$('.showlink').hover(function(){
$(this).css('color', '#aaa');
},
function(){
$(this).css('color', '#f3f3f3');
});
});
//Changes color depending on which page is active, fades that page in
$(function(){
$('#show_one').css('color', '#ffcb06');
$('#two, #three').hide();
});
$('.showlink').click(function(){
$('.showlink').css('color', '#f3f3f3');
$(this).css('color', '#ffcb06');
var toShow = this.id.substr(5);
$('div.page:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});
页面中的链接将您的内容滚动到浏览器窗口的顶部.有没有办法为此添加保证金？我将使用一些javascript来指导滚动,但希望有一个可行的后备.
因此,简而言之,我可以在CSS中添加一个边距,它会在浏览器窗口的顶部和页面链接之间添加一些空格.
HTML:
<nav>
<a href="#test">TEST</a>
</nav>
<div class="section">
<a name="test"></a>
<p>This content should be offset from the top of the page when scrolled to</p>
</div>
我有一些缩略图,当你悬停时,它们会有一个淡入淡出的播放按钮.我的问题是,当你反复盘旋它们时,说三次,它们会淡入淡出三次.我曾经遇到过一个jQuery函数,其中包含一个if then语句粗略地说它是否是动画而忽略了进一步的输入..但我不确定语法是做什么的.
想法？谢谢!
这是一个jsFiddle:http: //jsfiddle.net/danielredwood/66FwR/10/
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" …尝试在悬停和加载初始页面上执行一些非常基本的类操作。不知道为什么它不起作用-然后再次出现，以前从未用Vanilla编写过。
基本DOM：
<body>
<article>
<p>test</p>
</article>
</body>
JavaScript：
var bod = document.getElementsByTagName('body')[0],
article = document.getElementsByTagName('article')[0];
article.onMouseOver = function(){
bod.classList.add('focus');
}
article.onMouseOut = function(){
bod.classList.remove('focus');
}
window.onLoad = function(){
bod.classList.remove('loading');
}
有趣的一个对我来说.我有一个视频播放器,当悬停时显示控件.最初,我用CSS做了这个,但不得不将策略改为javascript,以便与浏览器全屏api一起玩(顺便说一句,这意味着你总是徘徊在视频上).
我的新方法是mousemove为视频容器设置一个事件处理程序,它添加一个类并设置超时以删除它,如果已经设置了超时,则清除它.这很有效,但逻辑不能扩展到多个玩家.
TLDR:如何扩展我的逻辑以扩展到多个视频容器？time变量的范围需要包含在每个元素事件中,但也包含在处理程序之外,以便可以将其从一个事件清除到下一个事件(在同一元素上).
感谢您的帮助 - 这些逻辑问题对我来说总是很困难.
这是一个jsFiddle示例.当您将鼠标悬停限制为一个元素时,您会注意到它很有效,但是当您扩展到页面上的其余元素时会出现问题.
HTML:
<div class="cont">
<div class="controls">controls</div>
</div>
JavaScript的:
var time;
$('body').on('mousemove', '.cont', function(){
var thiis = $(this);
if (time){
clearTimeout(time);
}
thiis.addClass('showControls');
time = setTimeout(function(){
thiis.removeClass('showControls');
}, 2000);
});
即使在规划阶段,我也有一个奇怪的布局可以绕过而且不知所措.基本上我需要将所有不是a的内容分开.gallery并将其放入<aside />.我最初考虑使用edit_post 插件API中的钩子插件,但后来决定反对它,因为这个内容更改是特定于布局的,我想维护一个干净的数据库.所以...
我怎样才能通过WP解析the_content内容.gallery呢？不可否认,不是一个PHP家伙,所以我更加感激帮助!
根据迈克尔下面的评论 - 这是WP的the_content类输出的一个例子:
HTML
<div class="entry-content">
<div class="gallery">
<dl class="gallery-item">
<dt class="gallery-icon portrait">
<img src="/imagePath/etc.jpg" class="attachment-thumbnail">
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon portrait">
<img src="/imagePath/etc.jpg" class="attachment-thumbnail">
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon portrait">
<img src="/imagePath/etc.jpg" class="attachment-thumbnail">
</dt>
</dl>
</div>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad …我正在研究一些原生的JavaScript(根本不是我的强项......)并没有看到我的功能结果.我确定我在某处有语法错误.你能帮我识别一下吗？仅供参考 - 该功能将动态居中页面上的对象.
this.style[left]= ((windowWidth - this.style[width])/2);
this.style[top]= ((windowHeight - this.style[height])/2);
我有一个容器设置为a max-width:780px,高度未声明.在容器内部,有一个图像幻灯片.页面上的所有内容都是响应式的,因此当宽度减小时,图像(宽度设置为100%)会调整高度容器.
幻灯片改变了图像,display:static;并且 position:absolute;不再"保持打开"容器,因为它不被视为容器的内容
是否有任何创造性的解决方案来获取绝对定位的子元素的高度？
下面的示例在主容器上声明了没有高度..没有任何东西保持打开状态. http://dhut.ch/test/santos/
谢谢!
遇到一个简单的问题.我的早茶不够结实.
如果div有一个孩子,那就是锚点了.不想在.box中添加其他类
就像是:
$('.box').click(function(){
if ($(this).children('a')) {
//some thing
} else {
//some thing else
}
});
<div class="box"><a href="#"><img src="#" /></a></div>
<div class="box"><img src="#" /></div>
<div class="box"><img src="#" /></div>
显然我的语法错误.
我有大量的div,其中少量的内容包裹在一个锚中.我想要做的就是移除锚点.
谢谢你的帮助!
http://jsfiddle.net/danielredwood/rg6n6/
期望的HTML:
<div class="box"><a href="#"><img src="#"></a></div>
// becomes:
<div class="box"><img src="#"></div>
JavaScript的:
$('.box img').unwrap('<a>');