Question

我尝试在图片上创建:hover，并让他们向其他页面显示其他图片，如菜单。我已经尝试过这段代码，但当鼠标在子菜单上时，它会打开而不是在主菜单上打开。我尝试实现这样的目标：

https://www.youtube.com/watch?v=Iya0oqKlBns

我使用了这段代码：

img{
width:150px;
}
body {
    background:transparent;
}

.clearfix:after {
    display:block;
    clear:both;
}

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:transparent;
}

.menu {
    width:1000px;
    margin:0px auto;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}

.menu a {
    transition:all linear 0.15s;
    color:transparent;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:transparent;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:transparent;
}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu {
    width:100%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:110%;
    z-index:-1;
    opacity:0;
    transition:opacity linear 1.15s;

    background:transparent;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:transparent;
}

.clearfix:after {
    display:block;
    clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:transparent;
}

.menu {
    width:1000px;
    margin:0px auto;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}

.menu a {
    transition:all linear 0.15s;
    color:transparent;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:transparent;
}
.menu .arrow {
    font-size:11px;
    line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:transparent;
}
/*----- Bottom Level -----*/
.sub-menu {

    padding:5px 0px;
    position:absolute;
    top:100%;
    left:-60%;
    z-index:-1;
    opacity:0;
    transition:opacity linear 1.15s;

    background:transparent;
}
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:transparent;
}

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">

            <li>
                <a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                    <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                    <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                    <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
                </ul>
            </li>

        </ul>
    </nav>
</div>

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">

            <li>
                <a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                    <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                    <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                    <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
                </ul>
            </li>

        </ul>
    </nav>
</div>

Answer 1

虽然您目前正在使用CSS直观地隐藏＆＃39;您的子菜单，您不会以任何样式写入，这些样式会在不活动时删除它们被鼠标:hover编辑的能力。如果没有这个，他们仍然可以在没有主菜单图标的情况下自行触发转换。

换句话说，display或visibility属性会删除元素使用鼠标光标触发:hover事件的能力。

这里有一个用于检查的codepen： http://codepen.io/anon/pen/zBRzZN

来自W3C规范：

插值

Visiblity值可在可见和不可见之间插值。因此，必须显示其中一个起始值或结束值，否则不会发生插值。如果其中一个值可见，则插值为离散步骤，其中0到1之间的定时功能的值映射到定时功能的可见和其他值（仅在转换的开始/结束时或由于具有y值在[0,1]之外的）的cubic-bezier（）函数映射到更近的端点。

进一步阅读：
https://www.w3.org/TR/css3-transitions/#animtype-visibility
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
https://stackoverflow.com/a/4929336/6177319

Answer 2

使用Hover伪类，转换和变换以及绝对定位，可以通过大量的css实现视频的效果。

Check out my pen here

HTML：

<div class="menu-wrap">
<nav class="menu">
  <ul class="main-menu">
    <li>
      <!--Wrap content in div -->
      <div class="big-icon bi1">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>

        <!--Hidden menu here -->
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi2">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi3">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi4">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi5">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi6">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi7">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi8">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi9">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi10">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi11">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>
    <li>
      <div class="big-icon bi12">
        <a href="#" class="big-img"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
                <li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
            </ul>
      </div>
    </li>    
  </ul>
</nav>

CSS：

img{
width:150px;
}
body {
    background:transparent;
}

.clearfix:after {
    display:block;
    clear:both;
}

/*----- General Style -----*/
ul {
    list-style: none;
    padding: 0;
}

.main-menu {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  width: 60%;
  float: right;
}

.main-menu li {
  margin-right: 5px;
}

.big-icon {
  position: relative;
}

.big-icon:hover .big-img {
  opacity: .8;
}


/*----- Small Arrow Position and Transform -----*/
.big-icon span {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 0.9em;
  transform: rotate(90deg);
  transition: transform .3s, opacity .3s;
  color: black;
}

.big-icon:hover span {
  transform: rotate(270deg);
}

/*----- Positioning/hiding sub Menu -----*/

.sub-menu {
  position: absolute;
  top: 0;
  left: -85px;
}

.sub-menu img {
  width: 75px;
}

.sub-menu li {
  position: absolute;
  top: 42px;
  left: 122px;
  opacity: 0;
}

/*----- Sub Menu - Transistions and Transforms -----*/

.sub-menu li:first-child {
  transition: top .3s, left .3s, opacity .3s;
}

.sub-menu li:nth-of-type(2) {
  transition: top .3s .3s, left .3s .3s, opacity .3s .3s;
}

.sub-menu li:nth-of-type(3) {
  transition: top .3s .6s, left .3s .6s, opacity .3s .6s;
}

.sub-menu li:last-child {
  transition: top .3s .9s, left .3s .9s, opacity .3s .9s;
}

.bi1:hover li:first-child,
.bi5:hover li:first-child,
.bi9:hover li:first-child {
  left: 0px;
  top: 0;
  opacity: 1;
}

.bi1:hover li:nth-of-type(2),
.bi5:hover li:nth-of-type(2),
.bi9:hover li:nth-of-type(2) {
  left: 0px;
  top: 80px;
  opacity: 1;
}

.bi1:hover li:nth-of-type(3),
.bi5:hover li:nth-of-type(3),
.bi9:hover li:nth-of-type(3) {
  left: 0px;
  top: 160px;
  opacity: 1;
}

.bi1:hover li:last-child,
.bi5:hover li:last-child,
.bi9:hover li:last-child {
  left: 0px;
  top: 240px;
  opacity: 1;
}

.bi2:hover li:first-child,
.bi6:hover li:first-child,
.bi10:hover li:first-child {
  left: -150px;
  top: 0;
  opacity: 1;
}

.bi2:hover li:nth-of-type(2),
.bi6:hover li:nth-of-type(2),
.bi10:hover li:nth-of-type(2) {
  left: -150px;
  top: 80px;
  opacity: 1;
}

.bi2:hover li:nth-of-type(3),
.bi6:hover li:nth-of-type(3),
.bi10:hover li:nth-of-type(3) {
  left: -150px;
  top: 160px;
  opacity: 1;
}

.bi2:hover li:last-child, 
.bi6:hover li:last-child,
.bi10:hover li:last-child {
  left: -150px;
  top: 240px;
  opacity: 1;
}

.bi3:hover li:first-child,
.bi7:hover li:first-child,
.bi11:hover li:first-child {
  left: -305px;
  top: 0;
  opacity: 1;
}

.bi3:hover li:nth-of-type(2),
.bi7:hover li:nth-of-type(2),
.bi11:hover li:nth-of-type(2){
  left: -305px;
  top: 80px;
  opacity: 1;
}

.bi3:hover li:nth-of-type(3),
.bi7:hover li:nth-of-type(3),
.bi11:hover li:nth-of-type(3) {
  left: -305px;
  top: 160px;
  opacity: 1;
}

.bi3:hover li:last-child,
.bi7:hover li:last-child,
.bi11:hover li:last-child {
  left: -305px;
  top: 240px;
  opacity: 1;
}

.bi4:hover li:first-child,
.bi8:hover li:first-child,
.bi12:hover li:first-child {
  left: -460px;
  top: 0;
  opacity: 1;
}

.bi4:hover li:nth-of-type(2),
.bi8:hover li:nth-of-type(2),
.bi12:hover li:nth-of-type(2) {
  left: -460px;
  top: 80px;
  opacity: 1;
}

.bi4:hover li:nth-of-type(3),
.bi8:hover li:nth-of-type(3),
.bi12:hover li:nth-of-type(3){
  left: -460px;
  top: 160px;
  opacity: 1;
}

.bi4:hover li:last-child,
.bi8:hover li:last-child,
.bi12:hover li:last-child {
  left: -460px;
  top: 240px;
  opacity: 1;
}

.bi4:hover li:first-child,
.bi8:hover li:first-child,
.bi12:hover li:first-child {
  left: -460px;
  top: 0;
  opacity: 1;
}

.bi5:hover li:first-child,
.bi6:hover li:first-child,
.bi7:hover li:first-child,
.bi8:hover li:first-child {
  top: -153px;
}

.bi5:hover li:nth-of-type(2),
.bi6:hover li:nth-of-type(2),
.bi7:hover li:nth-of-type(2),
.bi8:hover li:nth-of-type(2) {
  top: -73px;
}

.bi5:hover li:nth-of-type(3),
.bi6:hover li:nth-of-type(3),
.bi7:hover li:nth-of-type(3),
.bi8:hover li:nth-of-type(3) {
  top: 8px;
}

.bi5:hover li:last-child,
.bi6:hover li:last-child,
.bi7:hover li:last-child,
.bi8:hover li:last-child {
  top: 89px;
}

.bi9:hover li:first-child,
.bi10:hover li:first-child,
.bi11:hover li:first-child,
.bi12:hover li:first-child {
  top: -307px;
}

.bi9:hover li:nth-of-type(2),
.bi10:hover li:nth-of-type(2),
.bi11:hover li:nth-of-type(2),
.bi12:hover li:nth-of-type(2) {
  top: -225px;
}

.bi9:hover li:nth-of-type(3),
.bi10:hover li:nth-of-type(3),
.bi11:hover li:nth-of-type(3),
.bi12:hover li:nth-of-type(3) {
  top: -142px;
}

.bi9:hover li:last-child,
.bi10:hover li:last-child,
.bi11:hover li:last-child,
.bi12:hover li:last-child {
  top: -60px;
}

我想注意：

1）使用悬停并不适用于此菜单，因为如果将鼠标悬停在右侧的主图像上，则无法及时到达子菜单以选择项目。你真的需要JavaScript或jQuery来添加点击事件来显示子菜单。

2）使用较小宽度的屏幕使其完全响应需要做大量工作 - 由于绝对定位，我只在大屏幕上显示菜单。

3）这有很多重复的代码，用JavaScript / PHP自动化代码输入会好得多

请注意 - 我没有包含供应商前缀。诸如弹性框，转换，变换等CSS属性需要前缀。

：悬停在图像上显示其他图像

2 个答案:

插值