Question

当用户悬停按钮时，我想用文本转换我的div，无法弄清楚如何做... 我已经尝试了许多运算符> ~ + -但没有运气。

＆＃13;

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;
}

＆＃13;

<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/

Answer 1

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

k.ToString()

将鼠标悬停在另一个

1 个答案: