悬停 + div:show 不工作

Question

所以我试图在您使用 btn:hover + img {display:block} 仅使用 css 将鼠标悬停在立即设计按钮上时显示图像，但它不起作用并且我真的不知道为什么。

.ca-sub a {
    text-decoration: none;
}
.ca-sub p {
    color: black;
    background-color: white;
    margin-bottom: 0px;
    padding-top: 7px;
    padding-bottom: 11px;
    font-size: 1.2em;
}
.ca-menu {
    padding:0;
    /*margin:20px auto;*/
    width: 100%;
    margin-top: 0px;
    list-style-type: none;
}
.ca-menu li {
    width: 18.5%;
    height: 215px;
    overflow: hidden;
    position: relative;
    float:left;
    background: white;
    margin-right: 10px;
    margin-bottom: 15px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menu li:last-child {
    margin-right: 0px;
}
.ca-menu li a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.ca-menu li a img {
    text-align: left;
    width: auto;
    height: 70%;
    position: relative;
    margin: 0 auto;
    padding-top: 20px;
}
.ca-content {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 50%;
}
.ca-main {
    font-size: 30px;
    opacity: 0.8;
    text-align: center;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-sub {
    text-align:center;
    font-size: 14px;
    opacity: 0.8;
    position: absolute;
    bottom: -35px;
    width: 100%; 
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
/*.ca-sub {
 display: none;
}*/
.ca-menu li:hover { /* enlarges box */
    z-index:999;
    -webkit-transform: scale(1.1);  
    -moz-transform: scale(1.1);  
    -ms-transform: scale(1.1);   
    -o-transform: scale(1.1);   
    transform: scale(1.1);  
}
.ca-menu li:hover .ca-main {
    -webkit-animation: smallToBig 300ms ease;
    -moz-animation: smallToBig 300ms ease;
    -ms-animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub { /* brings up box from bottom */
    display: block;
    bottom: 0 !important;
    /*background-color: #ccc;*/
    -webkit-animation: moveUp 500ms ease;
    -moz-animation: moveUp 500ms ease;
    -ms-animation: moveUp 500ms ease;
}
.quotebtn {
    width: 49.5% !important;
    background-color: #0fbac1;
    float: left;
    color: white !important;
    text-align: center;
    line-height: 25px;
    font-family: geo;
}
.designbtn {
    width: 49.5% !important;
    background-color: #EE3443;
    float: right !important;
    color: white !important;
    text-align: center;
    line-height: 25px;
    font-family: geo;
}
.not {
    color: gray;
    background-color: gainsboro;
    pointer-events: none;
}
.not:hover {
    color: gray !important;
}
.quotebtn:hover, .designbtn:hover {
    color: black !important;
}
.designhere {
    display: none;
    z-index: 1;
    margin-bottom: -150px !important;
}
.designbtn:hover + .designhere {
    display: block !important;
}




@-webkit-keyframes smallToBig{
    from {
        -webkit-transform: scale(0.1);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes smallToBig{
    from {
        -moz-transform: scale(0.1);
    }
    to {
        -moz-transform: scale(1);
    }
}
@-ms-keyframes smallToBig{
    from {
        -ms-transform: scale(0.1);
    }
    to {
        -ms-transform: scale(1);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(100%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}


/* fixes for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {

}
/* /fixes for chrome */

<ul class="ca-menu">
    <li>
        <a href="https://www.brokenarrowwear.com/q/i.aspx?b=Fruit%20of%20the%20Loom&m=3930R">
            <img src="http://www.embroiderywear.com/q/img/FRU3930R.jpg" class="designhere" /><img src="http://www.embroiderywear.com/q/img/FRU3930R.png" />
            <div class="ca-content">
                <div class="ca-sub">
                    <p>Fruit of the Loom <br />Cotton T-Shirt</p>
                    <div>
                        <a href="https://www.brokenarrowwear.com/q/i.aspx?b=Fruit%20of%20the%20Loom&m=3930R" class="quotebtn">Get Quote</a>
                        <a href="https://www.brokenarrowwear.com/designer/designer.aspx?name=Fruit%20of%20the%20Loom&sku=3930R#/artLocations" class="designbtn">Design Now</a>
                    </div>
                </div>
            </div>
        </a>
    </li>
</ul>

http://www.embroiderywear.com/q/hovertest.html如果您想在线查看，这是我设置的测试网站

Answer 1

CSS + 选择器仅在元素是共享同一父元素的直接（相邻）兄弟元素时起作用。另一个相关的选择器是波浪号 ~，它不那么严格，允许其他兄弟姐妹介于两者之间。

在您的情况下，.designbtn 和 .designmore 不是兄弟姐妹，因此您的 CSS 规则将不起作用。当前 CSS 规范不允许更改以前的元素或不相关的元素。

此时您有两个选择：更改 HTML 结构或使用 JavaScript 来处理事件。

改变HTML

您可以将 .designhere img 放在 HTML 结构中 .designbtn link 的正下方。结果看起来像这样（我添加了一些 CSS 规则来演示）：

.ca-sub a {
  text-decoration: none;
}

.ca-sub p {
  color: black;
  background-color: white;
  margin-bottom: 0px;
  padding-top: 7px;
  padding-bottom: 11px;
  font-size: 1.2em;
}

.ca-menu {
  padding: 0;
  /*margin:20px auto;*/
  width: 100%;
  margin-top: 0px;
  list-style-type: none;
}

.ca-menu li {
  width: 18.5%;
  height: 215px;
  overflow: hidden;
  position: relative;
  float: left;
  background: white;
  margin-right: 10px;
  margin-bottom: 15px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.ca-menu li:last-child {
  margin-right: 0px;
}

.ca-menu li a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.ca-menu li a img {
  text-align: left;
  width: auto;
  height: 70%;
  position: relative;
  margin: 0 auto;
  padding-top: 20px;
}

.ca-content {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 50%;
  top: 50%;
}

.ca-main {
  font-size: 30px;
  opacity: 0.8;
  text-align: center;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.ca-sub {
  text-align: center;
  font-size: 14px;
  opacity: 0.8;
  position: absolute;
  bottom: -35px;
  width: 100%;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}


/*.ca-sub {
 display: none;
}*/

.ca-menu li:hover {
  /* enlarges box */
  z-index: 999;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.ca-menu li:hover .ca-main {
  -webkit-animation: smallToBig 300ms ease;
  -moz-animation: smallToBig 300ms ease;
  -ms-animation: smallToBig 300ms ease;
}

.ca-menu li:hover .ca-sub {
  /* brings up box from bottom */
  display: block;
  bottom: 0 !important;
  /*background-color: #ccc;*/
  -webkit-animation: moveUp 500ms ease;
  -moz-animation: moveUp 500ms ease;
  -ms-animation: moveUp 500ms ease;
}

.quotebtn {
  width: 49.5% !important;
  background-color: #0fbac1;
  float: left;
  color: white !important;
  text-align: center;
  line-height: 25px;
  font-family: geo;
}

.designbtn {
  width: 49.5% !important;
  background-color: #EE3443;
  float: right !important;
  color: white !important;
  text-align: center;
  line-height: 25px;
  font-family: geo;
}

.not {
  color: gray;
  background-color: gainsboro;
  pointer-events: none;
}

.not:hover {
  color: gray !important;
}

.quotebtn:hover,
.designbtn:hover {
  color: black !important;
}

.designhere {
  display: none;
  z-index: 1;
  margin-bottom: -150px !important;  
}

/* demo purpose */

.designhere {
    position: absolute;
    border: 1px solid red;
    top: -95px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
}

.designbtn:hover + .designhere {
  display: block !important;
}

@-webkit-keyframes smallToBig {
  from {
    -webkit-transform: scale(0.1);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes smallToBig {
  from {
    -moz-transform: scale(0.1);
  }
  to {
    -moz-transform: scale(1);
  }
}

@-ms-keyframes smallToBig {
  from {
    -ms-transform: scale(0.1);
  }
  to {
    -ms-transform: scale(1);
  }
}

@-webkit-keyframes moveFromBottom {
  from {
    -webkit-transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
  }
}

@-moz-keyframes moveFromBottom {
  from {
    -moz-transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(0%);
  }
}

@-ms-keyframes moveFromBottom {
  from {
    -ms-transform: translateY(100%);
  }
  to {
    -ms-transform: translateY(0%);
  }
}


/* fixes for chrome */

@media screen and (-webkit-min-device-pixel-ratio:0) {}


/* /fixes for chrome */

<ul class="ca-menu">
  <li>
    <a href="#">
      <!-- old place -->
      <img src="http://www.embroiderywear.com/q/img/FRU3930R.png" />
      <div class="ca-content">
        <div class="ca-sub">
          <p>Fruit of the Loom
            <br />Cotton T-Shirt</p>
          <div>
            <a href="#" class="quotebtn">Get Quote</a>
            <a href="#" class="designbtn">Design Now</a>
            <!-- new place -->
            <img src="http://www.embroiderywear.com/q/img/FRU3930R.jpg" class="designhere" />
          </div>
        </div>
      </div>
    </a>
  </li>
</ul>

jsFiddle: https://jsfiddle.net/azizn/3em6nz9c/

jQuery

如果你想保留你的 HTML 结构，那么你将无法用纯 CSS 解决问题，你需要一个 JavaScript 解决方案，如下所示：

$(".designbtn").on({
    mouseenter: function () {
        $(this).parents().eq(3).find('.designhere').show();
    },
    mouseleave: function () {
        $(this).parents().eq(3).find('.designhere').hide();
    }
});

$(".designbtn").on({
    mouseenter: function () {
        $(this).parents().eq(3).find('.designhere').show();
    },
    mouseleave: function () {
        $(this).parents().eq(3).find('.designhere').hide();
    }
});

.ca-sub a {
  text-decoration: none;
}

.ca-sub p {
  color: black;
  background-color: white;
  margin-bottom: 0px;
  padding-top: 7px;
  padding-bottom: 11px;
  font-size: 1.2em;
}

.ca-menu {
  padding: 0;
  /*margin:20px auto;*/
  width: 100%;
  margin-top: 0px;
  list-style-type: none;
}

.ca-menu li {
  width: 18.5%;
  height: 215px;
  overflow: hidden;
  position: relative;
  float: left;
  background: white;
  margin-right: 10px;
  margin-bottom: 15px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.ca-menu li:last-child {
  margin-right: 0px;
}

.ca-menu li a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.ca-menu li a img {
  text-align: left;
  width: auto;
  height: 70%;
  position: relative;
  margin: 0 auto;
  padding-top: 20px;
}

.ca-content {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 50%;
  top: 50%;
}

.ca-main {
  font-size: 30px;
  opacity: 0.8;
  text-align: center;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.ca-sub {
  text-align: center;
  font-size: 14px;
  opacity: 0.8;
  position: absolute;
  bottom: -35px;
  width: 100%;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}


/*.ca-sub {
 display: none;
}*/

.ca-menu li:hover {
  /* enlarges box */
  z-index: 999;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.ca-menu li:hover .ca-main {
  -webkit-animation: smallToBig 300ms ease;
  -moz-animation: smallToBig 300ms ease;
  -ms-animation: smallToBig 300ms ease;
}

.ca-menu li:hover .ca-sub {
  /* brings up box from bottom */
  display: block;
  bottom: 0 !important;
  /*background-color: #ccc;*/
  -webkit-animation: moveUp 500ms ease;
  -moz-animation: moveUp 500ms ease;
  -ms-animation: moveUp 500ms ease;
}

.quotebtn {
  width: 49.5% !important;
  background-color: #0fbac1;
  float: left;
  color: white !important;
  text-align: center;
  line-height: 25px;
  font-family: geo;
}

.designbtn {
  width: 49.5% !important;
  background-color: #EE3443;
  float: right !important;
  color: white !important;
  text-align: center;
  line-height: 25px;
  font-family: geo;
}

.not {
  color: gray;
  background-color: gainsboro;
  pointer-events: none;
}

.not:hover {
  color: gray !important;
}

.quotebtn:hover,
.designbtn:hover {
  color: black !important;
}

.designhere {
  display: none;
  z-index: 1;
  margin-bottom: -150px !important;  
}

.designbtn:hover + .designhere {
  display: block !important;
}

@-webkit-keyframes smallToBig {
  from {
    -webkit-transform: scale(0.1);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes smallToBig {
  from {
    -moz-transform: scale(0.1);
  }
  to {
    -moz-transform: scale(1);
  }
}

@-ms-keyframes smallToBig {
  from {
    -ms-transform: scale(0.1);
  }
  to {
    -ms-transform: scale(1);
  }
}

@-webkit-keyframes moveFromBottom {
  from {
    -webkit-transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
  }
}

@-moz-keyframes moveFromBottom {
  from {
    -moz-transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(0%);
  }
}

@-ms-keyframes moveFromBottom {
  from {
    -ms-transform: translateY(100%);
  }
  to {
    -ms-transform: translateY(0%);
  }
}


/* fixes for chrome */

@media screen and (-webkit-min-device-pixel-ratio:0) {}


/* /fixes for chrome */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="ca-menu">
  <li>
    <a href="#">
      <img src="http://www.embroiderywear.com/q/img/FRU3930R.jpg" class="designhere" />
      <img src="http://www.embroiderywear.com/q/img/FRU3930R.png" />
      <div class="ca-content">
        <div class="ca-sub">
          <p>Fruit of the Loom
            <br />Cotton T-Shirt</p>
          <div>
            <a href="#" class="quotebtn">Get Quote</a>
            <a href="#" class="designbtn">Design Now</a>
          </div>
        </div>
      </div>
    </a>
  </li>
</ul>

jsFiddle: https://jsfiddle.net/azizn/jk6Lqu6q/

悬停 + div:show 不工作

hover + div:show not working

html

css

hover

display

改变HTML

jQuery