Question

我正在尝试展示＆amp;隐藏带有图像的div，当我将鼠标悬停在图像/按钮上时，图像div应该从右到左显示，当我从按钮/图像鼠标移出时，它应该从左到右隐藏。这是我的编码

CSS

.txt4{
 position:absolute;
 z-index:99999;
 top:135px;
 left:275px;
}

Jquery的

  < script type = "text/javascript"
 language = "javascript" > $(document).ready(function (e) {
     $(".prod4").mouseenter(function (e) {
         $('.txt4').show("slide", {
             direction: "right"
         }, 2000);
         $('.p123h').css({
             "position": "absolute",
             "z-index": "1"
         });
     });
     $(".prod4").mouseout(function (e) {
         $('.txt4').hide("slide", {
             direction: "left"
         }, 2000);
         $('.p123h').css({
             "position": "absolute",
             "z-index": "-1"
         });
     });
 }); < /script>

.prod4是一张图片

HTML

<div id="myContainer"> 
   <div class="prod4"><a href="#" class="prodTxt4"></a></div> 
   <div class="txt4"><img src="images/image65.jpg" /></div> 
</div>

当我正在做show＆amp; hide它的工作，但从左到右

如果有人知道帮助我，

由于

Answer 1

如果您添加JQuery UI Library。

，上述代码应该有效

Here is your code, working with Jquery UI

$(document).ready(function (e) {
     $(".prod4").mouseenter(function (e) {
         $('.txt4').toggle("slide", {
             direction: "right"
         }, 2000);
         $('.p123h').css({
             "position": "absolute",
             "z-index": "1"
         });
     });
     $(".prod4").mouseout(function (e) {
         $('.txt4').toggle("slide", {
             direction: "left"
         }, 2000);
         $('.p123h').css({
             "position": "absolute",
             "z-index": "-1"
         });
     });
 });

Answer 2

让.myContainer拥有width: 100%并尝试？

使用网络检查工具检查您的DOM。

Answer 3

我修剪了你们中的一些人JS并且看起来似乎工作了这是一个可能的解决方案： wonder if this is what you want

在JS中不是很好，但删除这部分，有效：

 $('.p123h').css({
             "position": "absolute",
             "z-index": "-1"
         });

Answer 4

如果您可以共享HTML会更好，但无论如何，使用jquery的任何特定原因都可以通过css尝试使用：

`right : -100%;`

而不是left : 275px;

然后在悬停时更改为right :0;

这只是一个常见的解决方案，我可以在不看你的代码的情况下推荐。如果你可以创建一个jsfiddle，那将会更好，也更有帮助。

Answer 5

我让它正常工作

jQuery代码

$(".prod4").hover(
 //on mouseover
 function() {
  $('.txt4').show().animate({height: '291', width:'393', opacity:1}, 400);
 },
 //on mouseout
 function() {
  $('.txt4').hide().animate({height: '0px', width:'0px', opacity:0}, 'fast');
 }
);

CSS

.txt4{
 position:absolute;
 z-index:99999;
 top:115px;
 right:450px;
 width:0px;
 height:0px;
}

在jquery中显示和隐藏div从右到左

5 个答案: