[英]Menu Image On Hover CSS or jQuery Issue In WordPress
I am facing an issue. 我面临一个问题。 I have set an image for every single sub menu by using WordPress plugin. 我已经通过使用WordPress插件为每个子菜单设置了图像。 I am able to show the image on menu hover but it is looking very weird. 我能够在菜单悬停上显示图像,但是看起来很奇怪。 I am guessing it is whether CSS or Jquery Issue. 我猜这是CSS还是Jquery问题。
http://luxofdubai.com/development/moonstone/product-category/pendants-contemporary/ http://luxofdubai.com/development/moonstone/product-category/pendants-contemporary/
This is the website Link. 这是网站链接。 If you mouse over on products menu then hover on pendant menu trendy and contemporary. 如果将鼠标悬停在产品菜单上,则将鼠标悬停在时尚和现代的吊坠菜单上。 You will understand what kind of issue I am facing. 您将了解我面临的问题。 I want a smooth solution. 我想要一个顺利的解决方案。 This is jquery code but I think it's CSS issue. 这是jQuery代码,但我认为这是CSS问题。 There are 2 images for menu I just hide the normal one and only show the hovering one when you hover on menu. 菜单有2张图像,我只隐藏普通的一张,而当您将鼠标悬停在菜单上时,只显示悬停的一张。
jQuery(document).ready(function() {
jQuery(".menu-image").hide();
jQuery(".hovered-image").hide();
//Pendant Trendy //
jQuery(".mptrendy a .menu-image-title").addClass("mptrendyimg");
jQuery(".mptrendy a .hovered-image").addClass("trendpimage");
jQuery('.mptrendyimg').mouseover(function () {
jQuery(".trendpimage").show();
});
jQuery('.mptrendyimg').mouseout(function () {
jQuery(".trendpimage").hide();
});
// end Pendant Trendy //
Try adding class mptrendyimg to < a > since it is parent element for images : 尝试将类mptrendyimg添加到<a>,因为它是图像的父元素:
jQuery(".mptrendy a").addClass("mptrendyimg");
and also use mouseenter instead of mouseover 并使用mouseenter代替mouseover
jQuery('.mptrendyimg').mouseenter(function () {
jQuery(".trendpimage").show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.