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里用啥插件或代码能实现鼠标悬停图片上出现文字说明的效果?的主要内容,如果未能解决你的问题,请参考以下文章

带有缩放图像悬停功能的 Wordpress 图像插件

wordpress付费阅读用啥插件及支付方式?

wordpress:缩略图悬停->显示标题

wordpress 上的缩略图悬停弹出窗口

wordpress博客留言板自定义字段应该怎么做或者用啥插件

声音在鼠标悬停 mp3、Wordpress 上播放延迟