当用户悬停按钮时,我想用文本转换我的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>
&#13;
这是JSFiddle https://jsfiddle.net/mtf5k7wt/
答案 0 :(得分:1)
好的,我已经用简单的jquery函数完成了...我认为没有办法只使用CSS。
k.ToString()