如何使選定的觸發div保持可見性，直到其他div懸停在上面？

Question

我如何選擇在懸停在div觸發的選定divs （與.stayhovered配對）保持可見，直到該人懸停在不同的div ？

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

Answer 1

這是一個相當大的挑戰，但我想我已經明白了。

這是小提琴： http ： //jsfiddle.net/n810v1se/

......和片段 ：

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

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

這個怎么運作

角元素在targetDiv ，默認情況下是隱藏的。 將targetDiv懸停在其父級show class元素上時，顯示targetDiv很容易：

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

即使show -class元素中的內容命中視口的每個角，這些元素的實際寬度和高度也是其中h1元素的寬度和高度。 為什么？ 因為他們的角落元素有固定的定位。 （要查看此內容，請在show類中添加邊框。）

這意味着只有show的h1元素才會響應hover事件。

當鼠標離開h1元素時， hover事件將被取消，導致targetDiv消失。 但是，我們希望targetDiv保持可見，直到另一個 h1元素懸停。

我們通過在show懸停時使targetDiv占據整個屏幕來實現這一目標：

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

（ targetDiv已經有100％的寬度，所以這里不需要。）

現在當show徘徊時，它的targetDiv子將占據整個視口，使其保持懸停狀態。

從subject01移動到subject01時，這很subject02 。 但是現在不可能從subject02到subject01 。 為什么？ 因為當subject02的show父show懸停時，其內容占據整個視口。 由於subject02是在 subject01 之后 subject01 ，因此其父級基本上位於 subject01 ，使得subject01無法接收任何鼠標事件。

解決方案？ 給show類一個默認的z-index為1.當它懸停時，將其z-index更改為0.這樣，它總是落后於另一個show -class元素：

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

現在面臨的挑戰是保持stayhovered元素可見，而其他角落元素則不然。 我們通過添加opacity:1來實現這一點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無法接收懸停事件！

解決方案？ 向targetDiv添加負z-index ：

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

這就是最后一塊拼圖。

Answer 2

您可以在不更改css的情況下添加此javascript / jquery代碼：

jsfiddle示例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);





});