wordpress里用啥插件或代码能实现鼠标悬停图片上出现文字说明的效果?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wordpress里用啥插件或代码能实现鼠标悬停图片上出现文字说明的效果?相关的知识,希望对你有一定的参考价值。
wordpress里用什么插件或代码能实现鼠标悬停图片上出现文字说明的效果?
这不需要任何插件,只需要修改页面代码,在img标签或a标签中加入title=“你要显示的文字”;即可。例如在a标签中,当鼠标移动到“相关介绍”上,弹出显示为““相关介绍”文字:<a href="#1" class="nslog:1026" title="相关介绍" onclick="return false;">相关介绍</a>img标签同样可以这样增加 title,就可以实现悬停显示了。 参考技术A 这不需要什么插件。可以用JS实现。这个是比较常见,也是比较常用的一个的效果。网上是可以直接下载案例的,可以下载自己试着修改下就可以使用。
如何在wordpress中悬停时翻转产品图像?
【中文标题】如何在wordpress中悬停时翻转产品图像?【英文标题】:How to flip Product image on hover in wordpress? 【发布时间】:2016-02-22 14:28:44 【问题描述】:我想在鼠标悬停的产品图片上更改或翻转产品图片。所以请建议任何 WordPress 插件或任何实现该效果的代码(也建议进行更改的文件路径)。
【问题讨论】:
【参考方案1】:只需添加自定义图像字段,将 2 个图像(例如精选和来自自定义字段)放入包装器并更改包装器 z-index
上的层 hover
....
CSS:
.product-image--wrapper .img1
position: relative;
z-index: 1;
.product-image--wrapper .img2
position: relative;
z-index: 0;
.product-image--wrapper:hover .img2
z-index: 2;
..或者只是安装:https://wordpress.org/plugins/woocommerce-product-image-flipper/ 并关注:http://www.themelocation.com/how-to-flip-product-image-on-hover-in-woocommerce/
编辑:
我们使用以下代码修复 WooCommerce 产品图像翻转器:
jQuery(document).ready(function($)
jQuery( 'ul.products li.pif-has-gallery a:first-child' ).hover( function()
jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeInDown' ).addClass( 'animated fadeOutUp' );
jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeOutUp' ).addClass( 'animated fadeInDown' );
, function()
jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeOutUp' ).addClass( 'fadeInDown' );
jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeInDown' ).addClass( 'fadeOutUp' );
);
);
【讨论】:
..你在 woocommerce 工作吗? (你写的是“插件”,所以我认为你使用 WP):) 您可以使用自定义字段进行自定义并编辑 woocommerce 或安装:wordpress.org/plugins/woocommerce-product-image-flipper 我更喜欢自定义选项..您需要自定义 woocommerce..制作两个自定义字段并包含在您的查询中,使用答案中的 css。 我应该在哪里添加这两个海关字段。 让我们continue this discussion in chat。【参考方案2】:我正在使用带有 woo-commerce 2.6.1 的 WordPress 4.5.3,它运行良好,尽管 WordPress 说插件不兼容,所以我自己承担风险。
尝试在你的函数中添加animate.css
by daneden,我不知道这是否相关,但是如果我在function.php
上评论了animate.css,则插件无法正常工作。
哦,再一次,我认为你最好更改fadeInDown/fadeOutUp,我尝试只使用fadeIn/fadeOut,使用Down和Up会很奇怪,IMOO。
【讨论】:
【参考方案3】:由于产品图像翻转器已经过时了,这个工具在我的 woocommerce 商店中运行良好:WC Secondary Product Thumbnail https://de.wordpress.org/plugins/wc-secondary-product-thumbnail/
(希望它有所帮助,因为我花了很长时间才找到一个工作插件。Magni 图像翻转器也很奇怪,因为它会无休止地翻转图像,这真的不是我所期望的)
【讨论】:
【参考方案4】:@Matej Đaković 的扩展答案=>
首先安装https://wordpress.org/plugins/woocommerce-product-image-flipper/插件,然后将代码放在你的footer.php中
jQuery(document).ready(function($)
jQuery( '.product-image' ).hover( function()
jQuery( this ).find( '.attachment-woocommerce_thumbnail' ).removeClass( 'fadeIn' ).addClass( 'animated fadeOut' );
jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeOut' ).addClass( 'animated fadeIn' );
, function()
jQuery( this ).find( '.attachment-woocommerce_thumbnail' ).removeClass( 'fadeOut' ).addClass( 'fadeIn' );
jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeIn' ).addClass( 'fadeOut' );
);
);
【讨论】:
谢谢,我是新手,不知道如何正确构建代码部分。以上是关于wordpress里用啥插件或代码能实现鼠标悬停图片上出现文字说明的效果?的主要内容,如果未能解决你的问题,请参考以下文章