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.3e m;
  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和:target可以做一些与点击相似的事情，虽然它可能会变得复杂，具体取决于你想要它做什么，你只能一次打开一个。

  

目标CSS伪类表示一个唯一的元素（目标元素），其id与URL的片段匹配。

     

- https://developer.mozilla.org/en-US/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";
}

并且不要忘记默认情况下使用css设置信息div的样式以不显示（display: none;）（建议使用类）。抱歉我的英文

Answer 3

这是适应您的网站，您只需要调整css，因为高级属性不再负责，如果显示.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