1. 首页
  2. 问答
  3. CSS图像按钮不可点击

CSS图像按钮不可点击

2017-06-21 109 views
3

当点击信息框底部的箭头按钮时，怎么没有发生什么事，但是当你点击它们旁边时，幻灯片就会出现？幻灯片div上的箭头可以正常工作，如果直接点击它们，它只是在主div上无法正常工作。另外，为什么当您点击打开/关闭滑块时，它会将您带到页面的顶部？任何人有任何想法发生了什么？任何帮助，欢呼。CSS图像按钮不可点击

function findAncestor(el, cls) { 
 
    while ((el = el.parentElement) && !el.classList.contains(cls)); 
 
    return el; 
 
} 
 

 
function open(e) { 
 
    let li = e.target.parentNode.parentNode.parentNode; 
 
    li.classList.add('hover'); 
 
} 
 

 
function close(e) { 
 
    const hoverable = findAncestor(e.target, 'hover'); 
 
    hoverable.classList.remove('hover'); 
 
} 
 

 
const infoBoxListItems = [].slice.call(document.querySelectorAll('.open')); 
 
const closeButtons = [].slice.call(document.querySelectorAll('.close')); 
 

 
infoBoxListItems.forEach(function(elm) { 
 
    elm.addEventListener('click', open); 
 
}); 
 

 
closeButtons.forEach(function(btn) { 
 
    btn.addEventListener('click', close); 
 
});
.everything { 
 
    text-align:center; 
 
    min-height:775px; 
 
} 
 

 
.everything:hover { 
 
cursor: default; 
 
} 
 

 
#wrapper { 
 

 
    margin: 0 auto; 
 
} 
 
#wrapper img{ 
 
    width:100%; 
 
} 
 

 
.infobox-list { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
ul, ol, li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-position: outside; 
 
    list-style-type: none; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
*, *:before, *:after { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
ul, menu, dir { 
 
    display: block; 
 
    list-style-type: disc; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    -webkit-padding-start: 0px; 
 
} 
 

 
.hr { 
 
    border-color:rgba(255,255,255,0.3); 
 
    width: 210px; 
 
} 
 

 
body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #fff; 
 
    color: #555; 
 
    min-width: 20em; 
 
} 
 

 
.info-boxes li { 
 
    width: 320px; 
 
    height: 550px; 
 
    background: rgba(255,255,255,0.3); 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 4px; 
 
    margin: 0 0px 0px; 
 
    cursor:pointer; 
 
    position: relative; 
 
    overflow: hidden; 
 
    transform: scale(0.75); 
 
} 
 

 
.ptext 
 
{ 
 
    font-family:Verdana; 
 
    text-align:center; 
 
    font-size:24px; 
 
    color:#156466; 
 

 
} 
 

 
.profile 
 
{ 
 
    margin-top:10%; 
 
    margin-left:1px; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.learning 
 
{ 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.performance 
 
{ 
 
    margin-left:1px; 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.team 
 
{ 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.smallicons 
 
{ 
 
    width:60px; 
 
    height:60px; 
 
} 
 

 
.close { 
 
    font-size:25px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 2.35rem; 
 
    text-align: center; 
 
} 
 

 
.open { 
 
    font-size:25px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    text-align: center; 
 
} 
 

 
.openimg { 
 
    height:20px; 
 
    width:20px; 
 
} 
 

 
.closeimg { 
 
    height:20px; 
 
    width:20px; 
 
} 
 

 
.infobox-list li { 
 
    display: inline-block; 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight:lighter; 
 
} 
 

 
.info-boxes li .infobox { 
 
    display: table-cell; 
 
    text-align:center; 
 
    vertical-align: middle; 
 
    height: 550px; 
 
    width: 320px; 
 
} 
 

 
.info-boxes li .infobox:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 20%; 
 
    width: 160%; 
 
    height: 188%; 
 
    background-color: rgb(255, 255, 255); /* fallback */ 
 
    background-color: rgba(255, 255, 255, 0.2); 
 
    top: 0; 
 
    -webkit-transform: rotate(46deg); 
 
    -moz-transform: rotate(46deg); 
 
    transform: rotate(30deg); 
 
} 
 

 
.info-boxes li.hover .shade { 
 
    animation-name: windowshade; 
 
    cursor:pointer; 
 
} 
 

 
.info-boxes li .shade, 
 
.info-boxes li.hover .shade { 
 
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
section p { 
 
    line-height: 1.3em; 
 
    color: #6d6e71; 
 
    width: 100%; 
 
    padding: 0 10px; 
 
    margin-top: 5px; 
 
    margin-left: 0px; 
 
    text-align:left; 
 
} 
 

 
p { 
 
    display: block; 
 
} 
 

 
.info-boxes li .shade { 
 
    position: absolute; 
 
    width: 320px; 
 
    height: 570px; 
 
    left: 0; 
 
    top: 0; 
 
    background-color: #156466; 
 
    color: #fff; 
 
    display: table; 
 
    vertical-align: middle; 
 
    padding: 20px 10px 0; 
 
    transform: translateY(-340px); 
 
    animation-name: windowshade-out; 
 
} 
 

 
.info-boxes li .shade h3 { 
 
    color: #fff; 
 
    padding: 10px; 
 
    font-weight: bold 
 
} 
 

 
.info-boxes li .shade p { 
 
    color: #fff; 
 
    margin-top:23px; 
 
    line-height: 1.5em; 
 
    font-weight: lighter; 
 
} 
 

 
section a { 
 
    line-height: 2em; 
 
    color: #6d6e71; 
 
    width: 100%; 
 
    padding: 0 10px; 
 
    margin-top: 13px; 
 
    margin-left: 0px; 
 
    text-align:left; 
 
} 
 

 
a { 
 
    display:block; 
 
} 
 

 
.info-boxes li .shade a { 
 
    text-align:left; 
 
    color: #fff; 
 
    line-height: 1.5em; 
 
    font-weight: lighter; 
 
} 
 

 
.info-boxes li .shade a:hover { 
 
text-decoration:underline; 
 
} 
 

 
.ie9 .info-boxes li.hover .shade { 
 
    top: 245px 
 
} 
 

 
.info-boxes li.hover a { 
 
    text-decoration: none 
 
} 
 

 
@keyframes windowshade { 
 
    0% { 
 
    transform: translateY(-550px) 
 
    } 
 
    100% { 
 
    transform: translateY(0) 
 
    } 
 
} 
 

 
@keyframes windowshade-out { 
 
    0% { 
 
    transform: translateY(0) 
 
    } 
 
    100% { 
 
    transform: translateY(-550px) 
 
    } 
 
} 
 

 
.button_slide { 
 
    color: #156466; 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 0px; 
 
    padding: 18px 30px; 
 
    display: inline-block; 
 
    font-family: Verdana; 
 
    font-size: 14px; 
 
    margin-bottom:20px; 
 
    letter-spacing: 1px; 
 
    background-color: rgba(255,255,255,0.3); 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #156466; 
 
    -webkit-transition: ease-out 0.4s; 
 
    -moz-transition: ease-out 0.4s; 
 
    transition: ease-out 0.4s; 
 
} 
 

 
.slide_down:hover { 
 
    color:white; 
 
    border: 1px solid transparent; 
 
    box-shadow: inset 0 100px 0 0 #156466; 
 
} 
 

 
.button_slidehr { 
 
    color: #156466; 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 0px; 
 
    /* extend left padding */ 
 
    padding: 18px 15px 18px 62px; 
 
    position: relative; 
 
    display: inline-block; 
 
    font-family: Verdana; 
 
    font-size: 14px; 
 
    margin-bottom: 20px; 
 
    letter-spacing: 1px; 
 
    background-color: rgba(255,255,255,0.3); 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #156466; 
 
    -webkit-transition: ease-out 0.4s; 
 
    -moz-transition: ease-out 0.4s; 
 
    transition: ease-out 0.4s; 
 
} 
 

 
.slide_downhr:hover { 
 
    color:white; 
 
    border: 1px solid transparent; 
 
    box-shadow: inset 0 100px 0 0 #156466; 
 
} 
 

 
.button_slidehr:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png); 
 
    background-position: left center; 
 
    background-repeat: no-repeat; 
 
    background-size: auto 80%; 
 
} 
 

 
.slide_downhr:hover:after { 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498065514/iconhr_oz4fvo.png); 
 
}
<div class="everything"> 
 
    <br style="line-height:15px;"> 
 
    <section class="info-boxes"> 
 
    <ul class="infobox-list"> 
 
     
 
     
 
     <li> 
 
     <a href="#"> 
 
      <div class="infobox"> 
 
      <table> 
 
       <tr> 
 
       <img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Profile-Icon_oy7oxz.png"></tr> 
 
       <tr> 
 
       <p class="ptext">My Profile</p> 
 
       </tr> 
 
      </table> 
 
      <div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div> 
 
      </div> 
 
      <div class="shade"> 
 
      <table> 
 
       <tr> 
 
       <td> 
 
        <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png"> 
 
       </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/dash/profile/personalProfileManager?userid=NWTMP0001">About Me</a> 
 
        <hr class="hr"> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/person/resume?userid=NWTMP0001">Resume</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td> 
 
        <td> 
 
        <a href="">Accountabilities 
 
        </a> 
 
         <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Chnage-Password-Icon_noszkb.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/changepassword">Change Password</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Sign-Out-Icon_twkoy7.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Broker/Account/Login.aspx?wtrealm=https%3a%2f%2fNORTHWESTCOMP.stage.sumtotal.host%2fcore%2f&ReturnUrl=http%3a%2f%2fnorthwestcomp.stage.sumtotal.host%2fbroker%2fToken%2fSaml11.ashx%3fwa%3dwsignin1.0%26wtrealm%3dhttps%253a%252f%252fNORTHWESTCOMP.stage.sumtotal.host%252fcore%252f%26wreply%3dhttps%253a%252f%252fnorthwestcomp.stage.sumtotal.host%252fCore%252f%252f&domainid=52160A28FC58BBBE7D714E075077AC76">Sign Out</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     
 
     
 
     <li> 
 
       <a href="#"> 
 
     <div class="infobox"> 
 
      <table> 
 
      <tr> 
 
       <img class="learning" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Learning-Icon_gjy2yx.png"></tr> 
 
      <tr> 
 
       <p class="ptext">My Learning</p> 
 
      </tr> 
 
      </table> 
 
      <div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div> 
 
     </div> 
 
     <div class="shade"> 
 
      <table> 
 
      <tr> 
 
       <td> 
 
       <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png"> 
 
       </td> 
 
       <td> 
 
       <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2Fnorthwestcomp.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_Training.aspx%3FUserMode%3D0">Training Schedule</a> 
 
       <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-History_czttv1.png"> </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_LearnerReports.aspx%3FUserMode%3D0%26Mode%3D1">Training History</a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td> 
 
       <td> 
 
       <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_Evaluation.aspx%3FUserMode%3D0%26Mode%3D0">Course Feedback</a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497299106/Favourites_y9gkce.png"> </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Ftaxonomy%2FTAX_Fav.aspx%3FUserMode%3D0">Training Favourites 
 
        </a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td> 
 
        <td> 
 
        <a href="http://wearenorthwest.northwest.ca/departments/humanresources/your-learning/Pages/default.aspx">Learning Resources</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div> 
 
     </div> 
 
     </a> 
 
     </li> 
 
     
 
     <li> 
 
     <a href="#"> 
 
      <div class="infobox"> 
 
      <table> 
 
       <tr> 
 
       <img class="performance" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Performance-Icon_dpjwzn.png"></tr> 
 
       <tr> 
 
       <p class="ptext">My Performance</p> 
 
       </tr> 
 
      </table> 
 
      <div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div> 
 
      </div> 
 
      <div class="shade"> 
 
      <table> 
 
       <tr> 
 
       <td> 
 
        <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png"> 
 
       </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=TM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Fscripts%2Flightyearisapi.dll%3Fmatrixgoallist%26sdatanavid%3Dmygoals%26sdatanavroot%3D1%26sdatanavnmcd%3D61428%26sdatatypcd%3D5005%26sdataaction%3Dview%26matrixgoallist_sortcolumn%3Dsdb_matrixgoal_goaldesctxt%26matrixgoallist_sortorder%3DASC%26employeepicker%3Dportalgroupid%253dperformance%2526portalitemid%253dmygoals">Goals</a> 
 
        <hr class="hr"> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284934/EA_n8lvj1.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=TM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Fscripts%2Flightyearisapi.dll%3Ftasklst%26crit_taskview_modulecd%3Dperformance%26ttlnmcd%3D12507%26employeepicker%3Dportalgroupid%253dperformance%2526portalitemid%253dmyassessments">Effectiveness Assessment</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/devplan">Development Plan</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td> 
 
        <td> 
 
        <a href="">Feedback</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td> 
 
        <td> 
 
        <a href="http://wearenorthwest.northwest.ca/departments/humanresources/your-performance/Pages/default.aspx">Performance Resources 
 
        </a> 
 
         <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     
 
     <li> 
 
       <a href="#"> 
 
     <div class="infobox"> 
 
      <table> 
 
      <tr> 
 
       <img class="team" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/TeamIcon_czfdps.png"></tr> 
 
      <tr> 
 
       <p class="ptext">My Team</p> 
 
      </tr> 
 
      </table> 
 
      <div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div> 
 
     </div> 
 
     <div class="shade"> 
 
      <table> 
 
      <tr> 
 
       <td> 
 
       <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497300652/Team_iovnl5.png"> 
 
       </td> 
 
       <td> 
 
       <a href="https://northwestcomp.stage.sumtotal.host/Core/organization">Team</a> 
 
       <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FPortaPageRequestHandler.ashx%3FRU%3Dapp%252fmanagement%252fLMS_DevPlan.aspx%253fUserMode%253d1%2526Mode%253d1">Team Development</a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Training-cimpliance-icon_qlcqha.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FPortaPageRequestHandler.ashx%3FRU%3Dapp%252fmanagement%252fLMS_LearnerHome.aspx%253fUserMode%253d1">Training Compliance</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td> 
 
       <td> 
 
        <a href="http://wearenorthwest.northwest.ca/departments/humanresources/Your-Employment-And-Well-Being/manager-toolkit/Pages/default.aspx">Manager Toolkit 
 
        </a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
      <div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div> 
 
     </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </section> 
 
    </div>

来源

2017-06-21 Cole Gwozdecki

回答

2

---更新 我以前在其他的答案中提到的.closest（）函数。

我在打开的函数中添加了一个.parentNode，因为它比它指向“.shade”的原始元素更深一级。

function findAncestor(el, cls) { 
 
    while ((el = el.parentElement) && !el.classList.contains(cls)); 
 
    return el; 
 
} 
 

 
function open(e) { 
 
    let li = e.target.closest('li'); 
 
    li.classList.add('hover'); 
 
} 
 

 
function close(e) { 
 
    const hoverable = e.target.closest('li'); 
 
    hoverable.classList.remove('hover'); 
 
} 
 

 
const infoBoxListItems = [].slice.call(document.querySelectorAll('.open')); 
 
const closeButtons = [].slice.call(document.querySelectorAll('.close')); 
 

 
infoBoxListItems.forEach(function(elm) { 
 
    elm.addEventListener('click', open); 
 
}); 
 

 
closeButtons.forEach(function(btn) { 
 
    btn.addEventListener('click', close); 
 
});
.everything { 
 
    text-align:center; 
 
    min-height:775px; 
 
} 
 

 
.everything:hover { 
 
cursor: default; 
 
} 
 

 
#wrapper { 
 

 
    margin: 0 auto; 
 
} 
 
#wrapper img{ 
 
    width:100%; 
 
} 
 

 
.infobox-list { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
ul, ol, li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-position: outside; 
 
    list-style-type: none; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
*, *:before, *:after { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
ul, menu, dir { 
 
    display: block; 
 
    list-style-type: disc; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    -webkit-padding-start: 0px; 
 
} 
 

 
.hr { 
 
    border-color:rgba(255,255,255,0.3); 
 
    width: 210px; 
 
} 
 

 
body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #fff; 
 
    color: #555; 
 
    min-width: 20em; 
 
} 
 

 
.info-boxes li { 
 
    width: 320px; 
 
    height: 550px; 
 
    background: rgba(255,255,255,0.3); 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 4px; 
 
    margin: 0 0px 0px; 
 
    cursor:pointer; 
 
    position: relative; 
 
    overflow: hidden; 
 
    transform: scale(0.75); 
 
} 
 

 
.ptext 
 
{ 
 
    font-family:Verdana; 
 
    text-align:center; 
 
    font-size:24px; 
 
    color:#156466; 
 

 
} 
 

 
.profile 
 
{ 
 
    margin-top:10%; 
 
    margin-left:1px; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.learning 
 
{ 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.performance 
 
{ 
 
    margin-left:1px; 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.team 
 
{ 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.smallicons 
 
{ 
 
    width:60px; 
 
    height:60px; 
 
} 
 

 
.close { 
 
    font-size:25px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 2.35rem; 
 
    text-align: center; 
 
} 
 

 
.open { 
 
    font-size:25px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    text-align: center; 
 
} 
 

 
.openimg { 
 
    height:20px; 
 
    width:20px; 
 
} 
 

 
.closeimg { 
 
    height:20px; 
 
    width:20px; 
 
} 
 

 
.infobox-list li { 
 
    display: inline-block; 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight:lighter; 
 
} 
 

 
.info-boxes li .infobox { 
 
    display: table-cell; 
 
    text-align:center; 
 
    vertical-align: middle; 
 
    height: 550px; 
 
    width: 320px; 
 
} 
 

 
.info-boxes li .infobox:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 20%; 
 
    width: 160%; 
 
    height: 188%; 
 
    background-color: rgb(255, 255, 255); /* fallback */ 
 
    background-color: rgba(255, 255, 255, 0.2); 
 
    top: 0; 
 
    -webkit-transform: rotate(46deg); 
 
    -moz-transform: rotate(46deg); 
 
    transform: rotate(30deg); 
 
} 
 

 
.info-boxes li.hover .shade { 
 
    animation-name: windowshade; 
 
    cursor:pointer; 
 
} 
 

 
.info-boxes li .shade, 
 
.info-boxes li.hover .shade { 
 
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
section p { 
 
    line-height: 1.3em; 
 
    color: #6d6e71; 
 
    width: 100%; 
 
    padding: 0 10px; 
 
    margin-top: 5px; 
 
    margin-left: 0px; 
 
    text-align:left; 
 
} 
 

 
p { 
 
    display: block; 
 
} 
 

 
.info-boxes li .shade { 
 
    position: absolute; 
 
    width: 320px; 
 
    height: 570px; 
 
    left: 0; 
 
    top: 0; 
 
    background-color: #156466; 
 
    color: #fff; 
 
    display: table; 
 
    vertical-align: middle; 
 
    padding: 20px 10px 0; 
 
    transform: translateY(-340px); 
 
    animation-name: windowshade-out; 
 
} 
 

 
.info-boxes li .shade h3 { 
 
    color: #fff; 
 
    padding: 10px; 
 
    font-weight: bold 
 
} 
 

 
.info-boxes li .shade p { 
 
    color: #fff; 
 
    margin-top:23px; 
 
    line-height: 1.5em; 
 
    font-weight: lighter; 
 
} 
 

 
section a { 
 
    line-height: 2em; 
 
    color: #6d6e71; 
 
    width: 100%; 
 
    padding: 0 10px; 
 
    margin-top: 13px; 
 
    margin-left: 0px; 
 
    text-align:left; 
 
} 
 

 
a { 
 
    display:block; 
 
} 
 

 
.info-boxes li .shade a { 
 
    text-align:left; 
 
    color: #fff; 
 
    line-height: 1.5em; 
 
    font-weight: lighter; 
 
} 
 

 
.info-boxes li .shade a:hover { 
 
text-decoration:underline; 
 
} 
 

 
.ie9 .info-boxes li.hover .shade { 
 
    top: 245px 
 
} 
 

 
.info-boxes li.hover a { 
 
    text-decoration: none 
 
} 
 

 
@keyframes windowshade { 
 
    0% { 
 
    transform: translateY(-550px) 
 
    } 
 
    100% { 
 
    transform: translateY(0) 
 
    } 
 
} 
 

 
@keyframes windowshade-out { 
 
    0% { 
 
    transform: translateY(0) 
 
    } 
 
    100% { 
 
    transform: translateY(-550px) 
 
    } 
 
} 
 

 
.button_slide { 
 
    color: #156466; 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 0px; 
 
    padding: 18px 30px; 
 
    display: inline-block; 
 
    font-family: Verdana; 
 
    font-size: 14px; 
 
    margin-bottom:20px; 
 
    letter-spacing: 1px; 
 
    background-color: rgba(255,255,255,0.3); 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #156466; 
 
    -webkit-transition: ease-out 0.4s; 
 
    -moz-transition: ease-out 0.4s; 
 
    transition: ease-out 0.4s; 
 
} 
 

 
.slide_down:hover { 
 
    color:white; 
 
    border: 1px solid transparent; 
 
    box-shadow: inset 0 100px 0 0 #156466; 
 
} 
 

 
.button_slidehr { 
 
    color: #156466; 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 0px; 
 
    /* extend left padding */ 
 
    padding: 18px 15px 18px 62px; 
 
    position: relative; 
 
    display: inline-block; 
 
    font-family: Verdana; 
 
    font-size: 14px; 
 
    margin-bottom: 20px; 
 
    letter-spacing: 1px; 
 
    background-color: rgba(255,255,255,0.3); 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #156466; 
 
    -webkit-transition: ease-out 0.4s; 
 
    -moz-transition: ease-out 0.4s; 
 
    transition: ease-out 0.4s; 
 
} 
 

 
.slide_downhr:hover { 
 
    color:white; 
 
    border: 1px solid transparent; 
 
    box-shadow: inset 0 100px 0 0 #156466; 
 
} 
 

 
.button_slidehr:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png); 
 
    background-position: left center; 
 
    background-repeat: no-repeat; 
 
    background-size: auto 80%; 
 
} 
 

 
.slide_downhr:hover:after { 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498065514/iconhr_oz4fvo.png); 
 
}
<div class="everything"> 
 
    <br style="line-height:15px;"> 
 
    <section class="info-boxes"> 
 
    <ul class="infobox-list"> 
 
     
 
     
 
     <li class=""> 
 
     <a href="javascript:void(0)"> 
 
      <div class="infobox"> 
 
      <table> 
 
       <tr> 
 
       <img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Profile-Icon_oy7oxz.png"></tr> 
 
       <tr> 
 
       <p class="ptext">My Profile</p> 
 
       </tr> 
 
      </table> 
 
      <div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div> 
 
      </div> 
 
      <div class="shade"> 
 
      <table> 
 
       <tr> 
 
       <td> 
 
        <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png"> 
 
       </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/dash/profile/personalProfileManager?userid=NWTMP0001">About Me</a> 
 
        <hr class="hr"> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/person/resume?userid=NWTMP0001">Resume</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td> 
 
        <td> 
 
        <a href="">Accountabilities 
 
        </a> 
 
         <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Chnage-Password-Icon_noszkb.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/changepassword">Change Password</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Sign-Out-Icon_twkoy7.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Broker/Account/Login.aspx?wtrealm=https%3a%2f%2fNORTHWESTCOMP.stage.sumtotal.host%2fcore%2f&ReturnUrl=http%3a%2f%2fnorthwestcomp.stage.sumtotal.host%2fbroker%2fToken%2fSaml11.ashx%3fwa%3dwsignin1.0%26wtrealm%3dhttps%253a%252f%252fNORTHWESTCOMP.stage.sumtotal.host%252fcore%252f%26wreply%3dhttps%253a%252f%252fnorthwestcomp.stage.sumtotal.host%252fCore%252f%252f&domainid=52160A28FC58BBBE7D714E075077AC76">Sign Out</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     
 
     
 
     <li> 
 
       <a href="javascript:void(0)"> 
 
     <div class="infobox"> 
 
      <table> 
 
      <tr> 
 
       <img class="learning" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Learning-Icon_gjy2yx.png"></tr> 
 
      <tr> 
 
       <p class="ptext">My Learning</p> 
 
      </tr> 
 
      </table> 
 
      <div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div> 
 
     </div> 
 
     <div class="shade"> 
 
      <table> 
 
      <tr> 
 
       <td> 
 
       <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png"> 
 
       </td> 
 
       <td> 
 
       <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2Fnorthwestcomp.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_Training.aspx%3FUserMode%3D0">Training Schedule</a> 
 
       <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-History_czttv1.png"> </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_LearnerReports.aspx%3FUserMode%3D0%26Mode%3D1">Training History</a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td> 
 
       <td> 
 
       <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FLMS_Evaluation.aspx%3FUserMode%3D0%26Mode%3D0">Course Feedback</a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497299106/Favourites_y9gkce.png"> </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Ftaxonomy%2FTAX_Fav.aspx%3FUserMode%3D0">Training Favourites 
 
        </a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td> 
 
        <td> 
 
        <a href="http://wearenorthwest.northwest.ca/departments/humanresources/your-learning/Pages/default.aspx">Learning Resources</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div> 
 
     </div> 
 
     </a> 
 
     </li> 
 
     
 
     <li> 
 
     <a href="javascript:void(0)"> 
 
      <div class="infobox"> 
 
      <table> 
 
       <tr> 
 
       <img class="performance" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Performance-Icon_dpjwzn.png"></tr> 
 
       <tr> 
 
       <p class="ptext">My Performance</p> 
 
       </tr> 
 
      </table> 
 
      <div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div> 
 
      </div> 
 
      <div class="shade"> 
 
      <table> 
 
       <tr> 
 
       <td> 
 
        <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png"> 
 
       </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=TM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Fscripts%2Flightyearisapi.dll%3Fmatrixgoallist%26sdatanavid%3Dmygoals%26sdatanavroot%3D1%26sdatanavnmcd%3D61428%26sdatatypcd%3D5005%26sdataaction%3Dview%26matrixgoallist_sortcolumn%3Dsdb_matrixgoal_goaldesctxt%26matrixgoallist_sortorder%3DASC%26employeepicker%3Dportalgroupid%253dperformance%2526portalitemid%253dmygoals">Goals</a> 
 
        <hr class="hr"> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284934/EA_n8lvj1.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=TM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Fscripts%2Flightyearisapi.dll%3Ftasklst%26crit_taskview_modulecd%3Dperformance%26ttlnmcd%3D12507%26employeepicker%3Dportalgroupid%253dperformance%2526portalitemid%253dmyassessments">Effectiveness Assessment</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/devplan">Development Plan</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td> 
 
        <td> 
 
        <a href="">Feedback</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td> 
 
        <td> 
 
        <a href="http://wearenorthwest.northwest.ca/departments/humanresources/your-performance/Pages/default.aspx">Performance Resources 
 
        </a> 
 
         <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div> 
 
      </div> 
 
     </a> 
 
     </li> 
 
     
 
     <li> 
 
       <a href="javascript:void(0)"> 
 
     <div class="infobox"> 
 
      <table> 
 
      <tr> 
 
       <img class="team" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/TeamIcon_czfdps.png"></tr> 
 
      <tr> 
 
       <p class="ptext">My Team</p> 
 
      </tr> 
 
      </table> 
 
      <div class="open"><img class="openimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"></div> 
 
     </div> 
 
     <div class="shade"> 
 
      <table> 
 
      <tr> 
 
       <td> 
 
       <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497300652/Team_iovnl5.png"> 
 
       </td> 
 
       <td> 
 
       <a href="https://northwestcomp.stage.sumtotal.host/Core/organization">Team</a> 
 
       <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FPortaPageRequestHandler.ashx%3FRU%3Dapp%252fmanagement%252fLMS_DevPlan.aspx%253fUserMode%253d1%2526Mode%253d1">Team Development</a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Training-cimpliance-icon_qlcqha.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/pillarRedirect?relyingParty=LM&url=https:%2F%2FNORTHWESTCOMP.stage.sumtotal.host%2Flearning%2Fapp%2Fmanagement%2FPortaPageRequestHandler.ashx%3FRU%3Dapp%252fmanagement%252fLMS_LearnerHome.aspx%253fUserMode%253d1">Training Compliance</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td> 
 
       <td> 
 
        <a href="http://wearenorthwest.northwest.ca/departments/humanresources/Your-Employment-And-Well-Being/manager-toolkit/Pages/default.aspx">Manager Toolkit 
 
        </a> 
 
        <hr class="hr"> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
      <div class="close"><img class="closeimg" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"></div> 
 
     </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </section> 
 
    </div>

来源

2017-06-21 17:43:52 inoabrian

+1

真棒，谢谢你的伴侣，欢呼！ –

1

改变 “硬编码” 嵌套.parentNode以更灵活的方式，比如.closest()，让你去寻找最近的祖先https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

function open(e) { 
    let li = e.target.closest('li'); 
    li.classList.add('hover'); 
} 

function close(e) { 
    const hoverable = e.target.closest('li'); 
    hoverable.classList.remove('hover'); 
}

来源

2017-06-21 17:46:35 yuriy636

1 

function findAncestor(el, cls) { 
 
    while ((el = el.parentElement) && !el.classList.contains(cls)); 
 
    return el; 
 
} 
 

 
function open(e) { 
 
    let li = e.target.parentNode.parentNode.parentNode; 
 
    li.classList.add('hover'); 
 
} 
 

 
function close(e) { 
 
    const hoverable = findAncestor(e.target, 'hover'); 
 
    hoverable.classList.remove('hover'); 
 
} 
 

 
const infoBoxListItems = [].slice.call(document.querySelectorAll('.open')); 
 
const closeButtons = [].slice.call(document.querySelectorAll('.close')); 
 

 
infoBoxListItems.forEach(function(elm) { 
 
    elm.addEventListener('click', open); 
 
}); 
 

 
closeButtons.forEach(function(btn) { 
 
    btn.addEventListener('click', close); 
 
});
.everything { 
 
    text-align:center; 
 
    min-height:775px; 
 
} 
 

 
.everything:hover { 
 
cursor: default; 
 
} 
 

 
#wrapper { 
 

 
    margin: 0 auto; 
 
} 
 
#wrapper img{ 
 
    width:100%; 
 
} 
 

 
.infobox-list { 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
ul, ol, li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-position: outside; 
 
    list-style-type: none; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, ul, li, ol, form, fieldset { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
*, *:before, *:after { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
ul, menu, dir { 
 
    display: block; 
 
    list-style-type: disc; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    -webkit-padding-start: 0px; 
 
} 
 

 
.hr { 
 
    border-color:rgba(255,255,255,0.3); 
 
    width: 210px; 
 
} 
 

 
body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #fff; 
 
    color: #555; 
 
    min-width: 20em; 
 
} 
 

 
.info-boxes li { 
 
    width: 320px; 
 
    height: 550px; 
 
    background: rgba(255,255,255,0.3); 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 4px; 
 
    margin: 0 0px 0px; 
 
    cursor:pointer; 
 
    position: relative; 
 
    overflow: hidden; 
 
    transform: scale(0.75); 
 
} 
 

 
.ptext 
 
{ 
 
    font-family:Verdana; 
 
    text-align:center; 
 
    font-size:24px; 
 
    color:#156466; 
 

 
} 
 

 
.profile 
 
{ 
 
    margin-top:10%; 
 
    margin-left:1px; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.learning 
 
{ 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.performance 
 
{ 
 
    margin-left:1px; 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.team 
 
{ 
 
    margin-top:10%; 
 
    width:85px; 
 
    height:85px; 
 
} 
 

 
.smallicons 
 
{ 
 
    width:60px; 
 
    height:60px; 
 
} 
 

 
.close { 
 
    font-size:25px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 2.35rem; 
 
    text-align: center; 
 
} 
 

 
.open { 
 
    font-size:25px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    text-align: center; 
 
} 
 

 
.openimg { 
 
    height:20px; 
 
    width:20px; 
 
} 
 

 
.closeimg { 
 
    height:20px; 
 
    width:20px; 
 
} 
 

 
.infobox-list li { 
 
    display: inline-block; 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight:lighter; 
 
} 
 

 
.info-boxes li .infobox { 
 
    display: table-cell; 
 
    text-align:center; 
 
    vertical-align: middle; 
 
    height: 550px; 
 
    width: 320px; 
 
} 
 

 
.info-boxes li .infobox:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 20%; 
 
    width: 160%; 
 
    height: 188%; 
 
    background-color: rgb(255, 255, 255); /* fallback */ 
 
    background-color: rgba(255, 255, 255, 0.2); 
 
    top: 0; 
 
    -webkit-transform: rotate(46deg); 
 
    -moz-transform: rotate(46deg); 
 
    transform: rotate(30deg); 
 
} 
 

 
.info-boxes li.hover .shade { 
 
    animation-name: windowshade; 
 
    cursor:pointer; 
 
} 
 

 
.info-boxes li .shade, 
 
.info-boxes li.hover .shade { 
 
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
section p { 
 
    line-height: 1.3em; 
 
    color: #6d6e71; 
 
    width: 100%; 
 
    padding: 0 10px; 
 
    margin-top: 5px; 
 
    margin-left: 0px; 
 
    text-align:left; 
 
} 
 

 
p { 
 
    display: block; 
 
} 
 

 
.info-boxes li .shade { 
 
    position: absolute; 
 
    width: 320px; 
 
    height: 570px; 
 
    left: 0; 
 
    top: 0; 
 
    background-color: #156466; 
 
    color: #fff; 
 
    display: table; 
 
    vertical-align: middle; 
 
    padding: 20px 10px 0; 
 
    transform: translateY(-340px); 
 
    animation-name: windowshade-out; 
 
} 
 

 
.info-boxes li .shade h3 { 
 
    color: #fff; 
 
    padding: 10px; 
 
    font-weight: bold 
 
} 
 

 
.info-boxes li .shade p { 
 
    color: #fff; 
 
    margin-top:23px; 
 
    line-height: 1.5em; 
 
    font-weight: lighter; 
 
} 
 

 
section a { 
 
    line-height: 2em; 
 
    color: #6d6e71; 
 
    width: 100%; 
 
    padding: 0 10px; 
 
    margin-top: 13px; 
 
    margin-left: 0px; 
 
    text-align:left; 
 
} 
 

 
a { 
 
    display:block; 
 
} 
 

 
.info-boxes li .shade a { 
 
    text-align:left; 
 
    color: #fff; 
 
    line-height: 1.5em; 
 
    font-weight: lighter; 
 
} 
 

 
.info-boxes li .shade a:hover { 
 
text-decoration:underline; 
 
} 
 

 
.ie9 .info-boxes li.hover .shade { 
 
    top: 245px 
 
} 
 

 
.info-boxes li.hover a { 
 
    text-decoration: none 
 
} 
 

 
@keyframes windowshade { 
 
    0% { 
 
    transform: translateY(-550px) 
 
    } 
 
    100% { 
 
    transform: translateY(0) 
 
    } 
 
} 
 

 
@keyframes windowshade-out { 
 
    0% { 
 
    transform: translateY(0) 
 
    } 
 
    100% { 
 
    transform: translateY(-550px) 
 
    } 
 
} 
 

 
.button_slide { 
 
    color: #156466; 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 0px; 
 
    padding: 18px 30px; 
 
    display: inline-block; 
 
    font-family: Verdana; 
 
    font-size: 14px; 
 
    margin-bottom:20px; 
 
    letter-spacing: 1px; 
 
    background-color: rgba(255,255,255,0.3); 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #156466; 
 
    -webkit-transition: ease-out 0.4s; 
 
    -moz-transition: ease-out 0.4s; 
 
    transition: ease-out 0.4s; 
 
} 
 

 
.slide_down:hover { 
 
    color:white; 
 
    border: 1px solid transparent; 
 
    box-shadow: inset 0 100px 0 0 #156466; 
 
} 
 

 
.button_slidehr { 
 
    color: #156466; 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 0px; 
 
    /* extend left padding */ 
 
    padding: 18px 15px 18px 62px; 
 
    position: relative; 
 
    display: inline-block; 
 
    font-family: Verdana; 
 
    font-size: 14px; 
 
    margin-bottom: 20px; 
 
    letter-spacing: 1px; 
 
    background-color: rgba(255,255,255,0.3); 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #156466; 
 
    -webkit-transition: ease-out 0.4s; 
 
    -moz-transition: ease-out 0.4s; 
 
    transition: ease-out 0.4s; 
 
} 
 

 
.slide_downhr:hover { 
 
    color:white; 
 
    border: 1px solid transparent; 
 
    box-shadow: inset 0 100px 0 0 #156466; 
 
} 
 

 
.button_slidehr:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png); 
 
    background-position: left center; 
 
    background-repeat: no-repeat; 
 
    background-size: auto 80%; 
 
} 
 

 
.slide_downhr:hover:after { 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498065514/iconhr_oz4fvo.png); 
 
} 
 

 
.open::before { 
 
content: ""; 
 
background: url("http://res.cloudinary.com/djxai1v1e/image/upload/v1498056439/Close-Icon_ra8vcj.png"); 
 
height: 20px; 
 
width: 20px; 
 
display: inline-block; 
 
background-size: contain; 
 
} 
 
.close::before { 
 
content: ""; 
 
background: url("http://res.cloudinary.com/djxai1v1e/image/upload/v1498057420/opend-icon_nrulip.png"); 
 
height: 20px; 
 
width: 20px; 
 
display: inline-block; 
 
background-size: contain; 
 
}
<div class="everything"> 
 
    <br style="line-height:15px;"> 
 
    <section class="info-boxes"> 
 
    <ul class="infobox-list"> 
 
     <li> 
 
     <a href="javascript:void(0);"> 
 
      <div class="infobox"> 
 
      <table> 
 
       <tr> 
 
       <img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497467825/Profile-Icon_oy7oxz.png"></tr> 
 
       <tr> 
 
       <p class="ptext">My Profile</p> 
 
       </tr> 
 
      </table> 
 
      <div class="open"></div> 
 
      </div> 
 
      <div class="shade"> 
 
      <table> 
 
       <tr> 
 
       <td> 
 
        <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png"> 
 
       </td> 
 
       <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/dash/profile/personalProfileManager?userid=NWTMP0001">About Me</a> 
 
        <hr class="hr"> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/person/resume?userid=NWTMP0001">Resume</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td> 
 
        <td> 
 
        <a href="">Accountabilities 
 
        </a> 
 
         <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Chnage-Password-Icon_noszkb.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Core/changepassword">Change Password</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
       <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497970831/Sign-Out-Icon_twkoy7.png"> </td> 
 
        <td> 
 
        <a href="https://northwestcomp.stage.sumtotal.host/Broker/Account/Login.aspx?wtrealm=https%3a%2f%2fNORTHWESTCOMP.stage.sumtotal.host%2fcore%2f&ReturnUrl=http%3a%2f%2fnorthwestcomp.stage.sumtotal.host%2fbroker%2fToken%2fSaml11.ashx%3fwa%3dwsignin1.0%26wtrealm%3dhttps%253a%252f%252fNORTHWESTCOMP.stage.sumtotal.host%252fcore%252f%26wreply%3dhttps%253a%252f%252fnorthwestcomp.stage.sumtotal.host%252fCore%252f%252f&domainid=52160A28FC58BBBE7D714E075077AC76">Sign Out</a> 
 
        <hr class="hr"> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
      <div class="close"></div> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </section> 
 
    </div>

你可以直接通过CSS。

在这里您可以使用此代码。

删除

图片来自打开和关闭的div

更新

我使用open::before和close::before的背景图像。

希望这将帮助你:)

更新

在a标签更换#到javasctipt:void(0);。当点击打开或关闭按钮时，它将停止滚动至 。

来源

2017-06-21 17:49:19

+0

太棒了，非常感谢！为什么它会在点击后将您带到页面顶部？ –

+0

:)晚了一点点才能给出答案.. –

+0

无论如何要阻止发生？ –

相关问题

 相关问题