CSS懸停功能保持打開狀態

Question

我下面有一些使用HTML和CSS創建的信息框的代碼。 是否可以將懸停div保持打開狀態，直到您單擊底部的關閉按鈕，然后它將滑回並再次隱藏自身，而僅使用純CSS？ 任何幫助，歡呼！

 .everything { text - align: center; } .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: 1e m; - webkit - margin - after: 1e m; - webkit - margin - start: 0 px; - webkit - margin - end: 0 px; - webkit - padding - start: 0 px; } .hr { border - color: rgba(255, 255, 255, 0.3); margin - left: 9 px; width: 210 px; } body { font - family: Arial, Helvetica, sans - serif; font - size: 16 px; padding: 0; margin: 0; background - color: #fcfcfc; color: #555; min-width: 20em; } .info-boxes li { width: 310px; height: 535px; background: # e2ecf6; border: 0 px solid# efefef; border - radius: 4 px; margin: 0 0 px 0 px; cursor: pointer; position: relative; overflow: hidden; transform: scale(0.75); } .ptext { text - align: center; font - size: 20 px; } .profile { margin - top: 10 % ; margin - left: 1 px; width: 75 px; height: 75 px; } .performance { margin - left: 1 px; margin - top: 10 % ; width: 75 px; height: 75 px; } .learning { margin - top: 10 % ; width: 75 px; height: 75 px; } .team { margin - top: 10 % ; width: 75 px; height: 75 px; } .smallicons { width: 50 px; height: 50 px; } .profileclose { margin - top: 215 px; } .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: 535 px; width: 310 px; } .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(46 deg); - moz - transform: rotate(46 deg); transform: rotate(30 deg); } .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: 1 s; 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: 310px; height: 555px; left: 0; top: 0; background-color: # 00688 B; color: #fff; display: table; vertical - align: middle; padding: 20 px 10 px 0; transform: translateY(-340 px); animation - name: windowshade - out; } .info - boxes li.shade h3 { color: #fff; padding: 10 px; font - weight: bold } .info - boxes li.shade p { color: #fff; line - height: 3e m; font - weight: lighter; } .ie9.info - boxes li: hover.shade { top: 245 px } .info - boxes li: hover a { text - decoration: none } @keyframes windowshade { 0 % { transform: translateY(-535 px) } 100 % { transform: translateY(0) } } @keyframes windowshade - out { 0 % { transform: translateY(0) } 100 % { transform: translateY(-535 px) } } 

 <div class="everything"> <br style="line-height:100px;"> <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/v1497365894/Profile-Icon_twnm83.png"></tr> <tr> <p class="ptext">Profile</p> </tr> </table> </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> <p>About Me</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td> <td> <p>Resume</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td> <td> <p>Accountabilities <p/> <hr class="hr"> </td> </tr> </table> <div class="profileclose">Close</div> </div> </a> </li> <li> <a href="#"> <div class="infobox"> <table> <tr> <img class="performance" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497365894/Performance-Icon_bwevmx.png"></tr> <tr> <p class="ptext">Performance</p> </tr> </table> </div> <div class="shade"> <table> <tr> <td> <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png"> </td> <td> <p>Goals</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284934/EA_n8lvj1.png" </td> <td> <p>Effectiveness Assessment</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png" </td> <td> <p>Development Plan</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td> <td> <p>Resources <p/> <hr class="hr"> </td> </tr> </table> </div> </a> </li> <li> <div class="infobox"> <table> <tr> <img class="learning" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497365894/Learning-Icon_p8gqbk.png"></tr> <tr> <p class="ptext">Learning</p> </tr> </table> </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> <p>Training Plan</p> <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> <p>Training History</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td> <td> <p>Course Feedback</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497299106/Favourites_y9gkce.png"> </td> <td> <p>Training Favourites <p/> <hr class="hr"> </td> </tr> </table> </div> </li> <li> <div class="infobox"> <table> <tr> <img class="team" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497365894/TeamIcon_as9ynw.png"></tr> <tr> <p class="ptext">Team</p> </tr> </table> </div> <div class="shade"> <table> <tr> <td> <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497300652/Team_iovnl5.png"> </td> <td> <p>Team</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png"> </td> <td> <p>Team Goals</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td> <td> <p>Team Development</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png"> </td> <td> <p>Team Training</p> <hr class="hr"> </td> </tr> <tr> <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/Approval_f9y1da.png"> </td> <td> <p>Approvals <p/> <hr class="hr"> </td> </tr> </table> </div> </li> </ul> </section> </div> 

Answer 1

據我所知，不可能在:hover上完成純CSS中所描述的內容。

---

但是，可以通過使用id s和:target來完成與點擊相似的操作，盡管根據您要執行的操作它可能會變得很復雜，並且一次只能打開一個。

：target CSS偽類表示一個唯一元素（目標元素），其ID與URL的片段匹配。

– https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target

這是我正在描述的基本示例。

 ul div { padding: 1em; border: 1px solid #ccc; display: none; } ul div a { font-size: 0.8em; padding: 0.5em 0.5em 0; display: block; } ul div:target { display: block; } 

 <ul> <li> <a href="#menu-1">Menu Item 1</a> <div id="menu-1"> Expanded content 1 <a href="#">close</a> </div> </li> <li> <a href="#menu-2">Menu Item 2</a> <div id="menu-2"> Expanded content 2 <a href="#">close</a> </div> </li> <li> <a href="#menu-3">Menu Item 3</a> <div id="menu-3"> Expanded content 3 <a href="#">close</a> </div> </li> </ul> 

Answer 2

使用javascript幾乎沒有困難，但是您必須為每個信息div添加唯一標識符，並且可以使用html中的onmouseover屬性來調用javascript函數：

<ul>
  <li>
<a  onmouseover="show_info('menu-1')">Menu Item 1</a>
    <div id="menu-1">
      Expanded content 1
      <a href="javascript:close('menu-1')">close</a>
    </div>
  </li>
  <li>
    <a onmouseover="show_info('menu-2')">Menu Item 2</a>
    <div id="menu-2">
      Expanded content 2
      <a href="javascript:close('menu-2')">close</a>
    </div>
  </li>
  <li>
    <a onmouseover="show_info('menu-3')">Menu Item 3</a>
    <div id="menu-3">
      Expanded content 3
      <a href="javascript:close('menu-3')">close</a>
    </div>
      </li>
    </ul>

關閉按鈕也在調用js函數，以關閉div。 為此，您只需要兩個簡單的js函數：

function show_info(name) {
var element = document.getElementById(name);
element.style.display = "block";
}
function close(name) {
    var element = document.getElementById(name);
    element.style.display = "none";
}

並且不要忘記將信息div的樣式默認為css（不顯示）（ display: none; ）（建議使用類）。 對不起，我的英語

Answer 3

這是適應您的網站的，您只需要調整css，因為不再擁有hight屬性，並且如果顯示.infobox ，則li浮動到底部（我不知道為什么） 。 這是代碼：

<style>
.everything {
  text-align: center;
}

.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: 0 px; 
  -webkit-margin-end: 0 px; 
  -webkit-padding-start: 0 px;
}

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

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

.info-boxes li {
  width: 310px;
  background: #e2ecf6;
  border: 0px solid #efefef;
  border-radius: 4px;
  margin: 0 0px 0px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transform: scale(0.75);
}

.ptext {
  text-align: center;
  font-size: 20px;

}

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

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

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

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

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

.profileclose {
  margin-top: 0px;
  color: #6d6e71;
}

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

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

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

  .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: 310px;
  left: 0;
  top: 0;
  background-color: #00688B;
  color: #fff;
  display: table;
  vertical-align: middle;
  padding: 20 px 10 px 0;
  transform: translateY(-340 px);
  animation-name: windowshade-out;
}

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

  .info-boxes li.shade p {
    color: #fff;
    line-height: 3em;
    font-weight: lighter;
  }

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

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

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

@keyframes windowshade-out {
  0 % {
    transform: translateY(0)
  }
  100 % {
    transform: translateY(-535 px)
  }
}
</style>
<body>

<div class="everything">
<script>
    function show_info(name) {
        var element = document.getElementById(name);
        element.style.display = "block";
    }
    function close(name) {
        var element = document.getElementById(name);
        element.style.display = "none";
    }
</script>
  <br style="line-height:100px;">
  <section class="info-boxes">
    <ul class="infobox-list"><li>
        <div class="infobox" id="info-1">
            <table>
              <tr>
                <img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497365894/Profile-Icon_twnm83.png"></tr>
              <tr>
                <p class="ptext">Profile</p>
              </tr>
            </table>
          </div>
        <a onmouseover="show_info('info-1')">
          <div class="shade">
            <table>
              <tr>
                <td>
                  <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png">
                </td>
                <td>
                  <p>About Me</p>
                  <hr class="hr">
                </td>
              </tr>
              <tr>
                <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td>
                  <td>
                    <p>Resume</p>
                    <hr class="hr">
                  </td>
              </tr>
              <tr>
                <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td>
                  <td>
                    <p>Accountabilities
                      <p/>
                      <hr class="hr">
                  </td>
              </tr>
            </table>
            <a class="profileclose" href="javascript:close('info-1')">Close</a>
          </div>
        </a>
      </li><li>
        <div class="infobox" id="info-2">
            <table>
              <tr>
                <img class="performance" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497365894/Performance-Icon_bwevmx.png"></tr>
              <tr>
                <p class="ptext">Performance</p>
              </tr>
            </table>
          </div>
        <a onmouseover="show_info('info-2')">

          <div class="shade">
            <table>
              <tr>
                <td>
                  <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png">
                </td>
                <td>
                  <p>Goals</p>
                  <hr class="hr">
                </td>
              </tr>
              <tr>
                <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284934/EA_n8lvj1.png" </td>
                  <td>
                    <p>Effectiveness Assessment</p>
                    <hr class="hr">
                  </td>
              </tr>
              <tr>
                <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png" </td>
                  <td>
                    <p>Development Plan</p>
                    <hr class="hr">
                  </td>
              </tr>
              <tr>
                <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td>
                  <td>
                    <p>Resources
                      <p/>
                      <hr class="hr">
                  </td>
              </tr>
            </table>
          </div>
        </a>
      </li><li>
      <div class="infobox" id="info-3">
          <table>
            <tr>
              <img class="learning" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497365894/Learning-Icon_p8gqbk.png"></tr>
            <tr>
              <p class="ptext">Learning</p>
            </tr>
          </table>
        </div>
        <a onmouseover="show_info('info-3')">
        <div class="shade">
          <table>
            <tr>
              <td>
                <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png">
              </td>
              <td>
                <p>Training Plan</p>
                <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>
                  <p>Training History</p>
                  <hr class="hr">
                </td>
            </tr>
            <tr>
              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td>
                <td>
                  <p>Course Feedback</p>
                  <hr class="hr">
                </td>
            </tr>
            <tr>
              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497299106/Favourites_y9gkce.png"> </td>
                <td>
                  <p>Training Favourites
                    </p>
                    <hr class="hr">
                </td>
            </tr>
          </table>
        </div>
        </a>
      </li>
      <li>
        <div class="infobox" id="info-4">
          <table>
            <tr>
              <img class="team" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497365894/TeamIcon_as9ynw.png"></tr>
            <tr>
              <p class="ptext">Team</p>
            </tr>
          </table>
        </div>
        <div class="shade">
        <a onmouseover="show_info('info-4')" onmouseleave="close('info-4')">
          <table>
            <tr>
              <td>
                <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497300652/Team_iovnl5.png">
              </td>
              <td>
                <p>Team</p>
                <hr class="hr">
              </td>
            </tr>
            <tr>
              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png"> </td>
                <td>
                  <p>Team Goals</p>
                  <hr class="hr">
                </td>
            </tr>
            <tr>
              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td>
                <td>
                  <p>Team Development</p>
                  <hr class="hr">
                </td>
            </tr>
            <tr>
              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png"> </td>
                <td>
                  <p>Team Training</p>
                  <hr class="hr">
                </td>
            </tr>
            <tr>
              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/Approval_f9y1da.png"> </td>
                <td>
                  <p>Approvals</p>
                    <hr class="hr">
                </td>
            </tr>
          </table>
        </div>
            </a>
      </li>
    </ul>
  </section>
</div>
</body>

要隱藏圖標，請在鼠標離開li ，將第四個框的onmouseleave事件克隆到其他框，並克隆到js函數參數。 否則，您將必須將第一個框的關閉<a>添加到其他框，僅是其參數。 注意：在CSS中，空格很重要！ 不要添加任何隨機數（以fe十六進制顏色表示），也不要在“-”之前和之后添加某些內容，因為瀏覽器必須檢測整個字符串，例如-webkit-animation-iteration-count: 1; ，而不是： - webkit - animations - iteration - count: 1; ，因為這種方式實際上不起作用。 希望您與項目的其他部分相處融洽。
MMI