Question

每当我将鼠标悬停在任何图像上时，我都必须创建一个窗口。约束是窗口已定义且不应重复。意味着，如果我有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>

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

JSFiddle

Answer 1

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

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

 #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的

 $(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

<强>解释

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

<强> .hover

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

<强>的CSS

这种jQuery方法可以让你随时随地按照你想要的html的css做。

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

.css（＆＃34; zIndex＆＃34;，＆＃34; 4＆＃34;）

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

<强> $（本）

当您使用css类时，使用事件处理程序（我建议您学习如何尽可能多地使用它）时，$(this)变得无价值。这允许您将元素与事件处理程序内的类隔离。

<强> .addClass（＆＃34;这＆＃34）

addClass()和removeClass()是您改善用户体验的方式。我在hidden和disabled使用了很多，我需要禁用按钮或隐藏按钮等。

<强>。不是（＆＃34;此）

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

fadeIn（＆＃39; slow＆＃39;），fadeOut（＆＃39; fast＆＃39;）

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

结束

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

答：事件的类型即：on（＆＃39;点击＆＃39;），on（＆＃39;提交＆＃39;），on（＆＃39; mouseenter＆＃39;），on（＆＃39; change＆＃39;）等...

和

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

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

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

Answer 2

我使用了jquery＆＃39; .hover()，.before()和.after（）

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();
});

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

更新

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

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

Answer 3

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

create()

$( "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;
}

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

使用JQuery将鼠标悬停在div上

3 个答案: