如何使选定的触发div保持可见性，直到其他div悬停在上面？

时间：2014-11-21 23:28:48

标签： javascript jquery html css css3

如何将选定的divs（与.stayhovered配对）在悬停在div保持可见时触发，直到该人悬停在另一个div上？ / p>

jsfiddle此处。

提前谢谢！

HTML 

<div class="show" id="subject01">
    <h1>Subject 01</h1>
    <div class="targetDiv info01">
        <div class="topleft stayhovered">
            <b>Subject 01, topleft<br/><u>Maintain hover</u> until subject02 is hovered</b></div>
        <div class="topright">
            Subject 01, topright<br/>Fadeout when cursor hovers out</div>
        <div class="bottomleft stayhovered">
           <b>Subject 01, bottomleft<br/><u>Maintain hover</u> until subject02 is hovered</b></div>
        <div class="bottomright">
            Subject 01, bottomright<br/>Fadeout when cursor hovers out</div>
    </div> <!-- END | 01 target -->
</div> <!-- END | 01 show -->


<div class="show" id="subject02">
    <h1>Subject 02</h1>
    <div class="targetDiv info02">
        <div class="topleft">
             Subject 02, topleft<br/>Fadeout when cursor hovers out</div>
        <div class="topright stayhovered">
            <b>Subject 02, topright<br/><u>Maintain hover</u> until subject01 is hovered</b></div>
        <div class="bottomleft">
            Subject 02, bottomleft<br/>Fadeout when cursor hovers out</div>
        <div class="bottomright stayhovered">
            <b>Subject 02, bottomright<br/><u>Maintain hover</u> until subject01 is hovered</b></div>
    </div> <!-- END | 02 target -->
</div> <!-- END | 02 show -->

CSS 

/* hoverover text placement */

body {
    font-family: helvetica;
    font-size: 13px;
    background-color: #FAFAFA;
}

.topleft, .topright, .bottomleft, .bottomright {
    position: fixed;
}

.topleft {
    top:2%;
    left:2%;
    }

.topright {
    top:2%;
    right:2%;
    }

.bottomleft {
    bottom:2%;
    left:2%;
    }

.bottomright {
    bottom:2%;
    right:2%;
    }


/* Feature Typography */
 .featuretitle, .featureinfo, .rotate {

}
.featuretitle {

}
.featureinfo {

}
/* FEATURE DETAIL */
 .featuredetail {
    font-family:'Courier New', Courier, monospace;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 18px;
    overflow-x: hidden;
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50%
}

/* Subjects */

 #subject01 {
    left: 30%;
    top: 30%;
    position: fixed;
    color: #FE5722;
}

#subject02 {
    right: 30%;
    bottom: 30%;
    position: fixed;
    color: #3F51B5;
}

/* Feature */
 .feature-img-wrap {
    display:block;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.targetDiv {
    position:absolute;
    width:100%;
    visibility: hidden;
    opacity:0;
    -webkit-transition: all 250ms linear;
    -o-transition: all 250ms linear;
    transition: all 250ms linear;
}
.show:hover .targetDiv {
    visibility: visible;
    opacity:1;
}
.show:hover .stayhovered {
    visibility: visible;
    opacity:1;
}

2 个答案:

答案 0 :(得分：3)

这是一项挑战，但我认为我已经掌握了它。

这里是小提琴： http://jsfiddle.net/n810v1se/

...以及代码段：

＆＃13;
＆＃13; 
body {
  font-family: helvetica;
  font-size: 13px;
  background-color: #FAFAFA;
}

.topleft {
  top:2%;
  left:2%;
}

.topright {
  top:2%;
  right:2%;
}

.bottomleft {
  bottom:2%;
  left:2%;
}

.bottomright {
  bottom:2%;
  right:2%;
}


/* Subjects */

#subject01 {
  left: 30%;
  top: 20%;
  position: fixed;
  color: #FE5722;
}

#subject02 {
  right: 30%;
  bottom: 30%;
  position: fixed;
  color: #3F51B5;
}

.targetDiv {
  position:absolute;
  width:100%;
  visibility: hidden;
  opacity:0;
  -webkit-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

.topleft, .topright, .bottomleft, .bottomright {
  position: fixed;
  opacity: 0;
  -webkit-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

.stayhovered {
  opacity: 1;
}

h1:hover ~ div .topleft,
h1:hover ~ div .topright,
h1:hover ~ div .bottomleft,
h1:hover ~ div .bottomright
{
  visibility: visible;
  opacity: 1;
}

.show:hover .targetDiv {
  visibility: visible;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  opacity: 1;
  z-index: -1;
}

.show:hover {
  z-index: 0;
}

.show {
  z-index: 1;
}
＆＃13; 
<div class="show" id="subject01">
    <h1>Subject 01</h1>
    <div class="targetDiv info01">
        <div class="topleft stayhovered">
            <b>Subject 01, topleft<br/><u>Maintain hover</u> until subject02 is hovered</b></div>
        <div class="topright">
            Subject 01, topright<br/>Fadeout when cursor hovers out</div>
        <div class="bottomleft stayhovered">
           <b>Subject 01, bottomleft<br/><u>Maintain hover</u> until subject02 is hovered</b></div>
        <div class="bottomright">
            Subject 01, bottomright<br/>Fadeout when cursor hovers out</div>
    </div> <!-- END | 01 target -->
</div> <!-- END | 01 show -->


<div class="show" id="subject02">
    <h1>Subject 02</h1>
    <div class="targetDiv info02">
        <div class="topleft">
             Subject 02, topleft<br/>Fadeout when cursor hovers out</div>
        <div class="topright stayhovered">
            <b>Subject 02, topright<br/><u>Maintain hover</u> until subject01 is hovered</b></div>
        <div class="bottomleft">
            Subject 02, bottomleft<br/>Fadeout when cursor hovers out</div>
        <div class="bottomright stayhovered">
            <b>Subject 02, bottomright<br/><u>Maintain hover</u> until subject01 is hovered</b></div>
    </div> <!-- END | 02 target -->
</div> <!-- END | 02 show -->
＆＃13;
＆＃13;
＆＃13;

工作原理

角元素在targetDiv范围内，默认情况下隐藏。将鼠标悬停在其父级targetDiv类元素上时显示show非常容易：

.show:hover .targetDiv {visibility: visible;}

即使show - 类元素中的内容到达视口的每个角落，这些元素的实际宽度和高度也是其中h1元素的宽度和高度。为什么？因为他们的角落元素有固定的定位。 （要查看此内容，请为show类添加边框。）

这意味着只有h1中的show元素才会响应hover事件。

当鼠标离开h1元素时，hover事件将被取消，导致targetDiv消失。但是，在其他 targetDiv元素悬停之前，我们希望h1保持可见。

我们通过在targetDiv悬停时show占据整个屏幕来实现这一目标：

.show:hover .targetDiv {
  ...
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
}

（targetDiv已经有100％的宽度，所以这里不需要。）

现在，当show悬停时，其targetDiv个孩子将占据整个视口，导致其停留。

从subject01移动到subject02时效果很好。但现在无法从subject02 subject01移出subject02。为什么？因为当show的{​​{1}}父项悬停时，其内容会占用整个视口。由于subject02在 subject01之后被声明为，因此其父级基本上位于 subject01之上，因此无法subject01接收任何鼠标事件。

解决方案？为show类提供一个默认的z-index为1.当它悬停时，将其z-index更改为0.这样，它总是落后于另一个show - class element：

.show {z-index: 1;}
.show:hover {z-index: 0;}

现在面临的挑战是保持stayhovered元素可见而其他角元素不可见。我们通过将opacity:1添加到stayhovered的默认样式，并将角落元素更改为opacity:1，只有当他们之前的h1兄弟徘徊时才会这样做：

.stayhovered {opacity: 1;}

h1:hover ~ div .topleft,h1:hover ~ div .topright,
h1:hover ~ div .bottomleft,h1:hover ~ div .bottomright {
 opacity: 1;
}

这似乎一切都很好。 然而，现在targetDiv占用了整个视口，并且它具有固定的定位，它基本上覆盖了h1元素，使h1成为不可能收到悬停事件！

解决方案？将否定z-index添加到targetDiv：

.show:hover .targetDiv {
  ...
  z-index: -1;
}

这就是最后一块拼图。

答案 1 :(得分：0)

您可以在不改变css的情况下添加此javascript / jquery代码：

jsfiddle example http://jsfiddle.net/j9vtjk6j/1/ 

 //on hover function for #subject01 function
$("#subject01").hover(function(){

    //make the .targetDiv visible
    $(this).find(".targetDiv").css("visibility","visible");

     //make this .targetDiv visible    
    $(this).find(".targetDiv").css("opacity",1);

    //make the #subject02 .targetDiv invisible
    $("#subject02 .targetDiv").css("opacity",0);





});

//#subject02 hover function
$("#subject02").hover(function(){

    //make the .targetDiv visible
    $(this).find(".targetDiv").css("visibility","visible");    

    //make this .targetDiv visible
    $(this).find(".targetDiv").css("opacity",1);

    //make the #subject01 .targetDiv visible
    $("#subject01 .targetDiv").css("opacity",0);





});
相关问题
最新问题