我需要帮助,使我的标志和社会图标nopin悬停
I need help making my Logo and Social Icons nopin on hover
我需要从每个图像中删除我的pinit按钮的悬停效果。我想从社交图标和标志图像中删除悬停字体选项。我的社交图标有一个悬停效果,我想保持。我在www.latulipefloraldesigns.com/blog3.html有一个测试页面…任何帮助都是感激的!
HTML . .在
的正上方 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pinit.js"></script>
<script type="text/javascript">
$(function () {
$('img').pinit();
});
</script>
这是我的style.css
中的CSS .pinit .pinit-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:200;
display:none;
background:transparent url('../images/hover-1.png') repeat 0 0;
text-align:center;
}
/* button style, and center it */
.pinit .pinit-overlay a {
position:relative;
top:45%;
left:45%;
margin:-10px 0 0 -21px;
display:block;
width:100px;
height:100px;
background:transparent url('../img/pinit-button.png') no-repeat 0 0;
text-indent:-9999em;
}
.pinit .pinit-overlay a:hover {
background-positon: 0 -100px;
}
.pinit .pinit-overlay a:active {
background-position: 0 -100px;
}
jQuery在它自己的文件中
(function($){
//Attach this new method to jQuery
$.fn.extend({
pinit: function(options) {
var defaults = {
wrap: '<span class="pinit"/>',
pageURL: document.URL
}
var options = $.extend(defaults, options);
var o = options;
//Iterate over the current set of matched elements
return this.each(function() {
var e = $(this),
pi_media = e.data('media') ? e.data('media') : e[0].src,
pi_url = o.pageURL,
pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
pi_isvideo = 'false';
bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' + encodeURI (pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI (pi_isvideo) + '&description=' + encodeURI(pi_desc);
var eHeight = e.outerHeight();
e.wrap(o.wrap);
e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');
$('.pinit .pinit-button').on('click', function () {
window.open($(this).attr ('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
return false;
});
$('.pinit').mouseenter(function () {
$(this).children('.pinit-overlay').fadeIn(200);
}).mouseleave(function () {
$(this).children('.pinit-overlay').fadeOut(200);
});
});
}
});
})(jQuery);
在HTML脚本中,只需像这样定位它:
$('#content img').pinit();
那么它将只针对您的content ID.
内的项目,它不会针对位于您的页眉或页脚(即。社交媒体图标)。
相关文章:
- Javascript更改图标
- 单击更改图标并通过javascript添加一个css类
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 如何更改角度谷歌地图上的集群图标
- simpleweather js天气图标
- 更改图层中单个矢量特征的图标
- 使用Angular单击时更改特定图示符图标的颜色
- 加载图像时加载图标
- 可以'点击汉堡包图标后,菜单无法正常打开
- 持久页面操作图标
- 点击图标是't在量角器上工作
- 通过单击同一图标使菜单出现和消失
- 在for循环中使用多维数组设置google.maps.Marker图标
- 替换与单词'匹配的文本字符;购物车'替换为img图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在标记mapbox.js上添加自定义图标
- 如何制作Yii框架的linkHtmlOptions's的CGridView显示为图像图标,单击时会触发javas
- 将for循环生成的图标附加到列表项锚点中
- 我需要帮助,使我的标志和社会图标nopin悬停