将鼠标悬停在Div A上时更改Div B的颜色

Question

我试图在将鼠标悬停在Div A上时更改Div B的背景颜色，但似乎无法定位到该元素。尝试了〜和+两种方法，但似乎都不起作用。非常感激你的帮助。

密码笔@ https://codepen.io/tplusm/pen/mGBmYj

 <section class="row-fluid row center-text text-center twin-hero">
        <div class="hero-shadow">
        </div>
        <div class="hero-container">
            <div class="left-hero" id="left-hero">
                <div class="left-hero-tilt left-hero-tilt-expanded">
                    <div class="side-container">
                        <div class="initial active">
                            <span><h1>A</h1></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-hero" id="right-hero">
                <div class="right-hero-tilt" id="right-hero-tilt">
                    <div class="side-container">
                        <div class="initial active">
                            <span><h1>B</h1></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

向您的CSS添加一个类。您需要！important，因为默认颜色会被覆盖，因为它更具体。

.red {
  background-color: red !important;
}

然后在“ B”右侧的悬浮式ON功能中，将类添加到左侧

$('#left-hero').find(".left-hero-tilt").addClass("red");

然后在右侧的悬停功能中，从左侧删除课程

$('#left-hero').find(".left-hero-tilt").removeClass("red");

Answer 2

将带有颜色的类添加到CSS代码中，例如：

html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt.bg-blank {
  background-color: #FFF;
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt.bg-blank {
  background-color: #FFF;
}

然后使用addClass()/removeClass()在悬停时切换课程，如摘要所示：

$('#left-hero').hover(
  function() {
    $(this).addClass('left-hero-expanded');
    $(this).removeClass("left-hero-collapsed");
    $('#right-hero').removeClass("right-hero-expanded");
    $('#right-hero').addClass("right-hero-collapsed");
    $(this).find(".left-hero-tilt").addClass("left-hero-tilt-expanded");
    $(this).find(".left-hero-tilt").removeClass("left-hero-tilt-collapsed");
    $('#right-hero').find(".right-hero-tilt").removeClass("right-hero-tilt-expanded");
    $('#right-hero').find(".right-hero-tilt").addClass("right-hero-tilt-collapsed");
    $(".right-hero-tilt").addClass("bg-blank");
  },
  function() {
    $(this).removeClass('left-hero-expanded');
    $(".right-hero-tilt").removeClass("bg-blank");

  })

$('#right-hero').hover(
  function() {
    $(this).addClass("right-hero-expanded");
    $(this).removeClass("right-hero-collapsed");
    $('#left-hero').removeClass("left-hero-expanded");
    $('#left-hero').addClass("left-hero-collapsed");
    $('#left-hero').find(".left-hero-tilt").removeClass("left-hero-tilt-expanded");
    $('#left-hero').find(".left-hero-tilt").addClass("left-hero-tilt-collapsed");
    $(this).find(".right-hero-tilt").addClass("right-hero-tilt-expanded");
    $(this).find(".right-hero-tilt").removeClass("right-hero-tilt-collapsed");

    $(".left-hero-tilt").addClass("bg-blank");
  },
  function() {
    $(this).removeClass('right-hero-expanded');
    $('.left-hero-tilt').removeClass('left-hero-collapsed bg-blank');
  }
);

body,
html {
  margin: 0!important;
}

.center-text {
  text-align: center
}

.row-fluid {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.twin-hero {
  height: 580px;
  background-color: black;
  padding-top: 0 !important;
  width: 100%;
  overflow: hidden;
  position: relative
}

html[data-device-type="mobile"] .twin-hero {
  height: 625px
}

html:not([data-device-type="mobile"]) .twin-hero .hero-shadow {
  position: absolute;
  z-index: 40;
  width: 100%;
  height: 72px;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.07))
}

.twin-hero .hero-container {
  width: 100%;
  height: 100%
}

.twin-hero .hero-container .side-container {
  padding-top: 72px;
  width: 100%;
  max-width: 1300px;
  height: 80%;
  position: relative
}

html[data-device-type="mobile"] .twin-hero .hero-container .side-container {
  width: 100%
}

.twin-hero .hero-container .active {
  border-bottom: none
}

.twin-hero .hero-container .initial {
  position: absolute;
  width: 400px;
  padding-top: 130px;
  height: auto;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  opacity: 0
}

.twin-hero .hero-container .initial.active {
  opacity: 1
}

html[data-device-type="portable"] .twin-hero .hero-container .initial {
  width: 320px
}

html[data-device-type="mobile"] .twin-hero .hero-container .initial {
  padding: 0 5%;
  width: 90%;
  height: 300px
}

html[data-device-type="mobile"] .twin-hero .hero-container .initial p {
  padding-top: 4px;
  padding-bottom: 4px
}

.twin-hero .hero-container .expanded {
  position: absolute;
  width: 100%;
  top: 20%;
  height: auto;
  overflow: auto;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  opacity: 0
}

.twin-hero .hero-container .expanded.active {
  opacity: 1
}

html[data-device-type="portable"] .twin-hero .hero-container .expanded {
  top: 15%
}

html[data-device-type="mobile"] .twin-hero .hero-container .expanded {
  width: 90%;
  padding: 0 5%;
  transform: translateY(0);
  height: auto
}

.twin-hero .hero-container .collapsed {
  position: absolute;
  width: 300px;
  padding-top: 160px;
  height: auto;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  opacity: 0
}

.twin-hero .hero-container .collapsed.active {
  opacity: 1
}

html[data-device-type="mobile"] .twin-hero .hero-container .collapsed {
  width: 90%;
  padding: 0 5%
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero {
  position: absolute;
  z-index: 20;
  overflow: hidden;
  position: relative;
  -webkit-transition: transform .8s;
  transition: transform .8s;
  width: 85%;
  height: 100%;
  top: 0;
  transform: skewX(-10deg);
  -moz-transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
  left: -35%;
  box-shadow: 1px 0 10px rgba(0, 0, 0, 0.7)
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero:after {
  position: absolute;
  content: "";
  border: 1px solid rgba(0, 0, 0, 0.4);
  top: 0;
  right: -1px;
  height: 100%
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero.left-hero-collapsed {
  transform: skewX(-10deg) translateX(-25%);
  -moz-transform: skewX(-10deg) translateX(-25%);
  -webkit-transform: skewX(-10deg) translateX(-25%)
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero.left-hero-collapsed .left-hero-tilt-collapsed {
  transform: skewX(10deg) translateX(17%);
  -moz-transform: skewX(10deg) translateX(17%);
  -webkit-transform: skewX(10deg) translateX(17%)
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero.left-hero-expanded {
  transform: skewX(-10deg) translateX(25%);
  -moz-transform: skewX(-10deg) translateX(25%);
  -webkit-transform: skewX(-10deg) translateX(25%)
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero.left-hero-expanded .left-hero-tilt-expanded {
  transform: skewX(10deg) translateX(-9%);
  -moz-transform: skewX(10deg) translateX(-9%);
  -webkit-transform: skewX(10deg) translateX(-9%)
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero.left-hero-expanded .left-hero-tilt-expanded:before {
  opacity: 1
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt {
  width: 100%;
  height: 100%;
  margin-left: 15%;
  background: #203f7d;
  /*background: url('/images/hero-left-3.jpg') no-repeat center center;*/
  background-size: cover;
  transform: skewX(10deg);
  -moz-transform: skewX(10deg);
  -webkit-transform: skewX(10deg);
  -webkit-transition: transform .8s;
  transition: transform .8s
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt:before {
  content: "";
  -webkit-transition: opacity .8s;
  transition: opacity .8s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); */
  opacity: 0;
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt .side-container {
  float: right;
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt .side-container .initial {
  right: 30%
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt .side-container .expanded {
  right: 12%
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt .side-container .collapsed {
  right: 42%
}

html[data-device-type="portable"] .twin-hero .left-hero.left-hero-expanded .left-hero-tilt-expanded {
  transform: skewX(10deg) translateX(-7%);
  -moz-transform: skewX(10deg) translateX(-7%);
  -webkit-transform: skewX(10deg) translateX(-7%)
}

html[data-device-type="portable"] .twin-hero .left-hero .left-hero-tilt {
  background-position-x: -200px
}

@media only screen and (orientation:landscape) {
  html[data-device-type="portable"] .twin-hero .left-hero .left-hero-tilt {
    background-position-x: -80px
  }
}

html[data-device-type="portable"] .twin-hero .left-hero .left-hero-tilt .side-container .initial {
  right: 25%
}

html[data-device-type="portable"] .twin-hero .left-hero .left-hero-tilt .side-container .expanded {
  right: 20%
}

html[data-device-type="portable"] .twin-hero .left-hero .left-hero-tilt .side-container .collapsed {
  right: 34%
}

html[data-device-type="mobile"] .twin-hero .left-hero {
  position: absolute;
  z-index: 20;
  overflow: hidden;
  position: relative;
  -webkit-transition: transform .8s;
  transition: transform .8s;
  width: 100%;
  height: 88%;
  top: -36%;
  left: 0
}

html[data-device-type="mobile"] .twin-hero .left-hero.left-hero-collapsed {
  transform: translateY(-17%);
  -moz-transform: translateY(-17%);
  -webkit-transform: translateY(-17%)
}

html[data-device-type="mobile"] .twin-hero .left-hero.left-hero-collapsed .left-hero-tilt-collapsed {
  transform: translateY(30%);
  -moz-transform: translateY(30%);
  -webkit-transform: translateY(30%)
}

html[data-device-type="mobile"] .twin-hero .left-hero.left-hero-expanded {
  transform: translateY(25%);
  -moz-transform: translateY(25%);
  -webkit-transform: translateY(25%)
}

html[data-device-type="mobile"] .twin-hero .left-hero.left-hero-expanded .left-hero-tilt-expanded {
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0)
}

html[data-device-type="mobile"] .twin-hero .left-hero.left-hero-expanded .left-hero-tilt-expanded:before {
  opacity: 1
}

html[data-device-type="mobile"] .twin-hero .left-hero .left-hero-tilt {
  width: 100%;
  height: 100%;
  background: #203f7d;
  /*background: url('/images/hero-left-2.jpg') no-repeat center 74px;*/
  background-size: cover;
  transform: translateY(13%);
  -moz-transform: translateY(13%);
  -webkit-transform: translateY(13%);
  -webkit-transition: transform .8s;
  transition: transform .8s
}

html[data-device-type="mobile"] .twin-hero .left-hero .left-hero-tilt:before {
  content: "";
  -webkit-transition: opacity .8s;
  transition: opacity .8s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(90deg, rgba(0, 48, 135, 0.7), rgba(0, 156, 222, 0.7));*/
  opacity: 0
}

html[data-device-type="mobile"] .twin-hero .left-hero .left-hero-tilt .side-container .initial {
  top: 44%
}

html[data-device-type="mobile"] .twin-hero .left-hero .left-hero-tilt .side-container .expanded {
  top: 30%
}

html[data-device-type="mobile"] .twin-hero .left-hero .left-hero-tilt .side-container .collapsed {
  top: 45%
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero {
  width: 85%;
  height: 100%;
  position: absolute;
  top: 0;
  right: -25%;
  z-index: 10;
  -webkit-transition: transform .8s;
  transition: transform .8s;
  transform: translateX(-8%);
  -moz-transform: translateX(-8%);
  -webkit-transform: translateX(-8%)
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero.right-hero-collapsed {
  transform: translateX(25%);
  -moz-transform: translateX(25%);
  -webkit-transform: translateX(25%)
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero.right-hero-collapsed .right-hero-tilt-collapsed {
  transform: translateX(-27%);
  -moz-transform: translateX(-27%);
  -webkit-transform: translateX(-27%)
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero.right-hero-expanded {
  transform: translateX(-25%);
  -moz-transform: translateX(-25%);
  -webkit-transform: translateX(-25%)
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero.right-hero-expanded .right-hero-tilt-expanded {
  transform: translateX(6%);
  -moz-transform: translateX(6%);
  -webkit-transform: translateX(6%)
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero.right-hero-expanded .right-hero-tilt-expanded:before {
  opacity: 1
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt {
  width: 100%;
  height: 100%;
  background: #333;
  /*background: url('/images/hero-right-2.jpg') no-repeat center center;*/
  background-size: cover;
  -webkit-transition: transform .8s;
  transition: transform .8s
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt:before {
  content: "";
  -webkit-transition: opacity .8s;
  transition: opacity .8s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(90deg, rgba(0, 156, 222, 0.7), rgba(0, 48, 135, 0.7));*/
  opacity: 0
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt .side-container .initial {
  left: 35%
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt .side-container .expanded {
  left: 11%
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt .side-container .collapsed {
  left: 48%
}

html[data-device-type="portable"] .twin-hero .right-hero.right-hero-expanded .right-hero-tilt-expanded {
  transform: translateX(4%);
  -moz-transform: translateX(4%);
  -webkit-transform: translateX(4%)
}

html[data-device-type="portable"] .twin-hero .right-hero .right-hero-tilt {
  background-position-x: -360px
}

@media only screen and (orientation:landscape) {
  html[data-device-type="portable"] .twin-hero .right-hero .right-hero-tilt {
    background-position-x: -100px
  }
}

html[data-device-type="portable"] .twin-hero .right-hero .right-hero-tilt .side-container .initial {
  left: 29%
}

html[data-device-type="portable"] .twin-hero .right-hero .right-hero-tilt .side-container .expanded {
  left: 19%
}

html[data-device-type="portable"] .twin-hero .right-hero .right-hero-tilt .side-container .collapsed {
  left: 41%
}

html[data-device-type="mobile"] .twin-hero .right-hero {
  width: 100%;
  height: 78%;
  position: absolute;
  bottom: -25%;
  z-index: 10;
  -webkit-transition: transform .8s;
  transition: transform .8s
}

html[data-device-type="mobile"] .twin-hero .right-hero.right-hero-collapsed {
  transform: translateY(25%);
  -moz-transform: translateY(25%);
  -webkit-transform: translateY(25%)
}

html[data-device-type="mobile"] .twin-hero .right-hero.right-hero-collapsed .right-hero-tilt-collapsed {
  transform: translateY(-7%);
  -moz-transform: translateY(-7%);
  -webkit-transform: translateY(-7%)
}

html[data-device-type="mobile"] .twin-hero .right-hero.right-hero-expanded {
  transform: translateY(-20%);
  -moz-transform: translateY(-20%);
  -webkit-transform: translateY(-20%)
}

html[data-device-type="mobile"] .twin-hero .right-hero.right-hero-expanded .right-hero-tilt-expanded {
  transform: translateY(7%);
  -moz-transform: translateY(7%);
  -webkit-transform: translateY(7%)
}

html[data-device-type="mobile"] .twin-hero .right-hero.right-hero-expanded .right-hero-tilt-expanded:before {
  opacity: 1
}

html[data-device-type="mobile"] .twin-hero .right-hero .right-hero-tilt {
  width: 100%;
  height: 100%;
  background: #333;
  /*background: url('/images/hero-left-2.jpg') no-repeat center -80px;*/
  background-size: cover;
  -webkit-transition: transform .8s;
  transition: transform .8s
}

html[data-device-type="mobile"] .twin-hero .right-hero .right-hero-tilt:before {
  content: "";
  -webkit-transition: opacity .8s;
  transition: opacity .8s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*   background: linear-gradient(90deg, rgba(0, 156, 222, 0.7), rgba(0, 48, 135, 0.7)); */
  opacity: 0
}

html[data-device-type="mobile"] .twin-hero .right-hero .right-hero-tilt .side-container .initial {
  top: 18%
}

html[data-device-type="mobile"] .twin-hero .right-hero .right-hero-tilt .side-container .expanded {
  top: 4%
}

html[data-device-type="mobile"] .twin-hero .right-hero .right-hero-tilt .side-container .collapsed {
  top: 23%
}

@media screen and (min-width:2300px) {
  html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt .side-container .initial {
    left: 49%
  }
  html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt .side-container .initial {
    right: 39%
  }
}

@media screen and (min-width:1900px) {
  html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt .side-container .collapsed {
    left: 77%
  }
  html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt .side-container .collapsed {
    right: 62%
  }
  html:not([data-device-type="mobile"]) .twin-hero .hero-container .side-container .btn.btn-twin-hero {
    max-width: 300px
  }
}

html.no-csscolumns.no-cssanimations.no-csstransforms3d .twin-hero .hero-container .left-hero .expanded {
  width: 65%;
  top: 20%;
  left: 10%
}

html.no-csscolumns.no-cssanimations.no-csstransforms3d .twin-hero .hero-container .right-hero .expanded {
  width: 65%;
  top: 20%;
  left: 20%
}

html:not([data-device-type="mobile"]) .twin-hero .right-hero .right-hero-tilt.bg-blank {
  background-color: #FFF;
}

html:not([data-device-type="mobile"]) .twin-hero .left-hero .left-hero-tilt.bg-blank {
  background-color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="row-fluid row center-text text-center twin-hero">
  <div class="hero-shadow">
  </div>
  <div class="hero-container">
    <div class="left-hero" id="left-hero">
      <div class="left-hero-tilt left-hero-tilt-expanded">
        <div class="side-container">
          <div class="initial active">
            <span><h1>A</h1></span>
          </div>
        </div>
      </div>
    </div>
    <div class="right-hero" id="right-hero">
      <div class="right-hero-tilt" id="right-hero-tilt">
        <div class="side-container">
          <div class="initial active">
            <span><h1>B</h1></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>