使用JQuery将鼠标悬停在div上

I have to make a window whenever I hover over any image. The constraint is the window is defined and should not be repeated. Means, if I have 10 images, instead of 10 similar windows, only 1 window should dynamically change its width height and position (left, right, top, bottom) to act as a border for the image. The border effect can be obtained using CSS but I have other requirements for which I need this dynamic border effect.

每当我将鼠标悬停在任何图像上时，我都必须打开一个窗口。约束是窗口已定义且不应重复。意味着，如果我有10个图像，而不是10个相似的窗口，则只有1个窗口应该动态地改变其宽度高度和位置（左，右，顶部，底部）以充当图像的边框。边框效果可以使用CSS获得，但我有其他要求，我需要这种动态边框效果。

<div>  <!-- This is the border div -->
   <div id="top" class="imageBorder" style="display: block; width: 105px">Top</div>
   <div id="left" class="imageBorder" style="display: block; width: 105px"></div>
   <div id="right" class="imageBorder" style="display: block; width: 105px"></div>
   <div id="bottom" class="imageBorder" style="display: block; width: 105px">Bottom</div>
</div>

This above div is used as the window. Whenever I hover on any image, this div should surround it. I don't want this div to be copied and associated to each image at a time.

上面的div用作窗口。每当我将鼠标悬停在任何图像上时，这个div应该围绕它。我不希望这个div一次被复制并与每个图像相关联。

JSFiddle

的jsfiddle

3 个解决方案

#1

If the images are not thumbnails and they are different sizes then you can make a single container's width and height dynamic based on the selected/active image's width and height.

如果图像不是缩略图且尺寸不同，则可以根据所选/活动图像的宽度和高度使单个容器的宽度和高度动态变化。

HTML:

HTML：

<div id="container"></div>

<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />
<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />
<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />

CSS

CSS

 #container{
  position: absolute; 
  width: 100px; 
  height: 100px;
  background-color: red; 
  z-index: 2; 
  display:none;
 }
.img{max-width: 80px; max-height: 80px; z-index: 10000;}

JS/jQuery

JS / jQuery的

 $(document).ready(function(){
    $(".img").hover(function(){
       //on mouseenter
       var img = $(this);
       img.addClass("this");
       var c =  $("#container");   
       //change container width/height based on image size
       c.css({width:img.outerWidth() + 20, height:  img.outerHeight + 10});
      //position container
      c.css({top:img.offset().top - 10, left:  img.offset().left - 10,   position:'absolute'}).fadeIn("fast");
      //reset other images z-index
      $(".img:not(.this)").css("zIndex","1");
   }, function(){
  //on mouseleave
  if(!$("#container").css("display","none"))
      $("#container").fadeOut("fast");             
      $(".img").css("zIndex","4");                 
      $(this).removeClass("this");
});
});

JSFIDDLE

的jsfiddle

Explanation

说明

jQuery is the most powerful javascript library out there, I suggest you learn how to use this exclusively as it will sharpen your javascript skills and improve your UI skills as well. Typically I define my html elements using classes and ids so I can take advantage of javascript/jQuery.

jQuery是最强大的javascript库，我建议你学习如何独家使用它，因为它会提高你的javascript技能并提高你的UI技能。通常我使用类和ID定义我的html元素，所以我可以利用javascript / jQuery。

.hover

。徘徊

I am using the .hover event handler which is explained in detail here. Using this event handler you can define the mouseenter and mouseleave using a single handler as the first anonymous function handles the mouseenter while the second handles the mouseleave.

我正在使用.hover事件处理程序，这里将详细介绍。使用此事件处理程序，您可以使用单个处理程序定义mouseenter和mouseleave，因为第一个匿名函数处理mouseenter而第二个处理mouseleave。

.css

的CSS

This jQuery method allows you to do practially anything you want to your html's css on the fly.

这个jQuery方法允许你在运行时按照你想要的html的css实际做任何事情。

NOTE: outerWidth(), outerHeight() or width(), height() will have different results. Using which one depends on whether or not the element has box-sizing:border-box or border.

注意：outerWidth（），outerHeight（）或width（），height（）将有不同的结果。使用哪一个取决于元素是否具有box-sizing：border-box或border。

.css("zIndex", "4")

.css（“zIndex”，“4”）

This is jQuery's way of editing css z-index on the fly. This is how the #container is able to overlap the other images not active.

这是jQuery即时编辑css z-index的方法。这就是#container能够与其他未激活的图像重叠的方式。

$(this)

$（本）

When you use an event handler (I suggest you learn how to use as many as possible) with a css class the $(this) becomes invaluable. This allows you to isolate the element from the class inside the event handler.

当你使用一个事件处理程序（我建议你学习如何使用尽可能多的css类）时，$（this）变得非常宝贵。这允许您将元素与事件处理程序内的类隔离。

.addClass("this")

.addClass（ “这”）

The addClass() and removeClass() is how you can improve the user experience. I use this alot with hidden and disabled where I need to disable buttons or hide them etc.

addClass（）和removeClass（）是改善用户体验的方法。我使用隐藏和禁用的很多，我需要禁用按钮或隐藏它们等。

.not("this)

。不是这个）

This is a quick and easy way to isolate the element for longer than the event handler is in scope. I use this alot in dropdown lists aka select lists.

这是一种快速简便的方法，可以将元素隔离的时间长于事件处理程序的范围。我在下拉列表中使用了很多，也就是选择列表。

fadeIn('slow'), fadeOut('fast')

fadeIn（'slow'），fadeOut（'fast'）

Use this jQuery method with any html element that has the property: display: none. It allows you to toggle whether or not the element is visible which is an upgrade over toggling between display: none - block or inline

将此jQuery方法与任何具有以下属性的html元素一起使用：display：none。它允许您切换元素是否可见，这是在display：none - block或inline之间切换的升级

In closing

在结束时

The one thing you must familiarize yourself with when it comes to event handling and that is propagation! When dealing with event handling the event listeners will listen for an event based on the following:

在事件处理和传播方面，您必须熟悉一件事！处理事件处理时，事件侦听器将根据以下内容侦听事件：

A: the type of event ie: on('click'), on('submit'), on('mouseenter'), on('change') etc...

答：事件的类型，即：on（'click'），on（'submit'），on（'mouseenter'），on（'change'）等...

and

和

B: the type of element ie: class, or html element (ie: div, input, select, a, button etc...)

B：元素的类型，即：class或html元素（即：div，input，select，a，button等...）

This can cause erroneous results especially if the elements are created dynamically.

这可能会导致错误的结果，尤其是在动态创建元素的情况下。

Get familiar with event propagation, event bubbling and event closures!

熟悉事件传播，事件冒泡和事件关闭！

#2

Not sure about final look and behavior of border div (you can tweak it to fit your needs), but this should help. I made few changes in CSS, to make all works...

不确定border div的最终外观和行为（你可以调整它以满足你的需要），但这应该有所帮助。我在CSS中做了一些改动，以完成所有工作......

$( "img" ).hover(
  function() {
  $('.border-div').css('display','block');
    
     $('.border-div').css('width',$(this).width()+5+'px');
     $('.border-div').css('height',$(this).height()+5+'px');

      $('.border-div').css('left',$(this).offset().left-1.2+'px');
     $('.border-div').css('top',$(this).offset().top-2+'px');
     
  },
  function() {
    $('.border-div').css('display','none');
  }
);

.imageStyle{
  width:100px;
  height:100px;
  margin: 3px 3px 3px 3px;
  padding: 2px 2px 2px 2px;
  box-sizing:border-box;
  cursor:pointer;
}

#top{
  border-radius: 3px 3px 0px 0px;        
	border-top: 1px solid #333333;        
	border-right: 1px solid #333333;        
	border-left: 1px solid #333333;        

}

#left{
  border-left: 1px solid #333333;        
	width: 5px; 
}

#right { 
  border-right: 1px solid #333333;        
  width: 5px;   
} 

#bottom {
  border-radius: 0px 0px 3px 3px;        
	border-bottom: 1px solid #333333;        
	border-right: 1px solid #333333;        
	border-left: 1px solid #333333; 
position:absolute;
width:100%;
bottom:0px;

}

img {
  display:block;
  z-index:9;
  position:relative;
}
.border-div {
  position:absolute;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="https://2.bp.blogspot.com/-zasBPCmkmm4/V4S6jz0bOeI/AAAAAAAAHAI/qq7mYlCBjvsE4NWKWxyYi3IV9qHfpXgVwCLcB/s1600/seamlessly-repeating-background-with-abstract-composition.jpg" class="imageStyle">
</div>
<div>
  <img src="https://2.bp.blogspot.com/-zasBPCmkmm4/V4S6jz0bOeI/AAAAAAAAHAI/qq7mYlCBjvsE4NWKWxyYi3IV9qHfpXgVwCLcB/s1600/seamlessly-repeating-background-with-abstract-composition.jpg" class="imageStyle">
</div> 
<div>
  <img src="https://2.bp.blogspot.com/-zasBPCmkmm4/V4S6jz0bOeI/AAAAAAAAHAI/qq7mYlCBjvsE4NWKWxyYi3IV9qHfpXgVwCLcB/s1600/seamlessly-repeating-background-with-abstract-composition.jpg" class="imageStyle">
</div> 
<div>
  <img src="https://2.bp.blogspot.com/-zasBPCmkmm4/V4S6jz0bOeI/AAAAAAAAHAI/qq7mYlCBjvsE4NWKWxyYi3IV9qHfpXgVwCLcB/s1600/seamlessly-repeating-background-with-abstract-composition.jpg" class="imageStyle">
</div> 

<div class="border-div">  <!-- This is the border div -->
<div id="top" class="imageBorder" style="display: block;">Top</div>
<div id="left" class="imageBorder" style="display: block; "></div>
<div id="right" class="imageBorder" style="display: block; "></div>
<div id="bottom" class="imageBorder" style="display: block;">Bottom</div>
</div>

Important: to avoid problems on hover, border div is placed under the image...otherwise, there could be some blinking (when image and border div overlapping occurs).

重要提示：为避免悬停时出现问题，边框div位于图像下方...否则，可能会有一些闪烁（当图像和边框div重叠发生时）。

#3

I used jquery's .hover(), .before() and .after()

我使用了jquery的.hover（）,. before（）和.after（）

https://jsfiddle.net/2fmo1xjm/3/

https://jsfiddle.net/2fmo1xjm/3/

$("div > img").hover( function()
{
    $(this).before( `<div id='main_window'><div id="top" class="imageBorder" style="display: block; width: 105px">Top</div>
<div id="left" class="imageBorder" style="display: block; width: 105px"></div>` );
    $(this).after(`<div id="right" class="imageBorder" style="display: block; width: 105px"></div>
<div id="bottom" class="imageBorder" style="display: block; width: 105px">Bottom</div>
</div>`);
},
function()
{
    $("#top, #left, #bottom, #right").remove();
});

play around with it to get the window you want, and of course make it nicer.

玩它来获得你想要的窗口，当然让它更好。

Updated:

更新：

Use .wrap() instead. Has top and bottom headers if you need.

请改用.wrap（）。如果需要，有顶部和底部标题。

https://jsfiddle.net/2fmo1xjm/9/

https://jsfiddle.net/2fmo1xjm/9/