将鼠标悬停在另一个上时变换比例 div

Question

我想在用户悬停按钮时用文本转换我的 div 比例，无法弄清楚如何做到这一点......我尝试了很多运算符> ~ + -没有运气。

 section { background: #000; color:#fff; height: 1000px; padding: 150px 0; font-family: Roboto; } section h1 { color: #fff; width:250px; font-size: 36px; padding: 10px 20px; font-weight:500; background-size: 200% 100%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #fff 50%); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } section:hover h1 { background-position: -100% 0; color: #2ecc71; width:250px; padding: 10px 20px; } #aboutUs .description { z-index: 999; } #aboutUs .desc { margin-top: 150px; font-size: 16px; line-height: 1.8em; letter-spacing: 1.2px; text-align: justify; color: #fff; border: 2px solid rgba(255, 255, 255, .8); padding: 20px 30px; margin-left: 40px; font-weight: normal; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; z-index: 999; } #aboutUs .desc b { background: #2ecc71; color: #fff; padding: 5px; font-weight: normal; } #aboutUs .desc:hover { transform: scale(1.05); } #aboutUs a.btn-outline { margin-top: 40px; letter-spacing: 1.2px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 0px; padding: 20px 30px; font-size: 16px; color: #fff; background-size: 200% 100%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #fff 50%); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } #aboutUs a.btn-outline:hover { background-position: -100% 0; color: #000; } // Here i try to add style when user hover on button #aboutUs a.btn-outline:hover + #aboutUs .desc { transform: scale(1.05); } #aboutUs .aboutUsfoto { background-image: url(https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg); border-bottom: 5px solid #fff; height: 80%; background-position: center; background-size: 100% 100%; overflow: hidden; background-size: cover; line-height: 600px; text-align: center; width: 60vw; margin-left: -280px; right:0; position:absolute; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; opacity: .4; z-index: 1; } #aboutUs .aboutUsfoto h2 { font-size: 200px; opacity: .1; bottom: 0; position: absolute; right: 0; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="aboutUs"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>O nas</h1> </div> <div class="col-md-7 description"> <!-- I want this div to scale --> <p id="text" class="desc wow bounceInLeft" data-wow-delay=".5s" data-wow-duration="1.2s"> Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <b>quis nostrud exercitation</b> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum <b>dolore eu fugiat</b> nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <b>culpa qui officia</b> deserunt mollit anim id est laborum. </p> <!-- When user hover this button --> <a id="more" href="#" class="btn btn-outline pull-right text-center wow bounceInLeft" data-wow-delay=".9s" data-wow-duration="1.2s">Czytaj więcej</a> </div> <div class="hidden-sm"> <div class="aboutUsfoto wow bounceInRight" data-wow-delay=".2s" data-wow-duration="1.2s"> <h2>O NAS</h2> </div> </div> </div> </div> </section>

这是 JSFiddle https://jsfiddle.net/mtf5k7wt/

Answer 1

好的，我用简单的 jquery 函数完成了它......我认为没有办法只用 CSS 来完成它。

  $('#more').hover(
    function(){
      var $this = $('#text');
      $this.data('transform', $this.css('transform')).css('transform', 'scale(1.05)');
    },
    function(){
      var $this = $('#text');
      $this.css('transform', $this.data('transform'));
    }
  );