- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这个脚本,当鼠标悬停在特定的 div 上时,它会改变正文背景。如果鼠标在 body 上但 2 秒后,我想将 body 颜色改回原始颜色。
$( "#attacker" ).hover(function() {
$('body').css({"background":"url(img/4178903.jpg)",'background-repeat': 'no-repeat', 'background-size':'cover','background-attachment' : 'fixed','background-position':'center','transition': 'background-image 0.8s ease-in-out'});
});
$( "#midfield" ).hover(function() {
$('body').css({"background-image":"url(img/david-villa-football-players-hd-wallpaper-876271979.jpg)",'background-repeat': 'no-repeat', 'background-size':'cover','background-attachment' : 'fixed','background-position':'center','transition': 'background-image 0.8s ease-in-out'});
});
$( "#defender" ).hover(function() {
$('body').css({"background":"url(img/Cristiano_Ronaldo_and_Gennaro_Gattuso_Football_Player_Wallpaper.jpg)",'background-repeat': 'no-repeat', 'background-size':'cover','background-attachment' : 'fixed','background-position':'center','transition': 'background-image 0.8s ease-in-out'});
});
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body {
background: #fbc73b;
font-family: 'Lato', Arial, sans-serif;
color: #fff;
}
.wrapper {
margin: 0 auto 100px auto;
max-width: 960px;
}
.stage {
list-style: none;
padding: 0;
}
/*************************************
Build the scene and rotate on hover
**************************************/
.scene {
width: 260px;
height: 400px;
margin: 30px;
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.movie {
width: 260px;
height: 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-130px);
-moz-transform: translateZ(-130px);
transform: translateZ(-130px);
-webkit-transition: -webkit-transform 350ms;
-moz-transition: -moz-transform 350ms;
transition: transform 350ms;
}
.movie:hover {
-webkit-transform: rotateY(-78deg) translateZ(20px);
-moz-transform: rotateY(-78deg) translateZ(20px);
transform: rotateY(-78deg) translateZ(20px);
}
/*************************************
Transform and style the two planes
**************************************/
.movie .poster,
.movie .info {
position: absolute;
width: 260px;
height: 400px;
background-color: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.movie .poster {
-webkit-transform: translateZ(130px);
-moz-transform: translateZ(130px);
transform: translateZ(130px);
background-size: cover;
background-repeat: no-repeat;
}
.movie .info {
-webkit-transform: rotateY(90deg) translateZ(130px);
-moz-transform: rotateY(90deg) translateZ(130px);
transform: rotateY(90deg) translateZ(130px);
border: 1px solid #B8B5B5;
font-size: 0.75em;
}
/*************************************
Shadow beneath the 3D object
**************************************/
.csstransforms3d .movie::after {
content: '';
width: 260px;
height: 260px;
position: absolute;
bottom: 0;
box-shadow: 0 30px 50px rgba(0,0,0,0.3);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotateX(90deg) translateY(130px);
-moz-transform: rotateX(90deg) translateY(130px);
transform: rotateX(90deg) translateY(130px);
-webkit-transition: box-shadow 350ms;
-moz-transition: box-shadow 350ms;
transition: box-shadow 350ms;
}
.csstransforms3d .movie:hover::after {
box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}
/*************************************
Movie information
**************************************/
.info header {
color: #FFF;
padding: 7px 10px;
font-weight: bold;
height: 195px;
background-size: contain;
background-repeat: no-repeat;
text-shadow: 0px 1px 1px rgba(0,0,0,1);
}
.info header h1 {
margin: 0 0 2px;
font-size: 1.4em;
}
.info header .rating {
border: 1px solid #FFF;
padding: 0px 3px;
}
.info p {
padding: 1.2em 1.4em;
margin: 2px 0 0;
font-weight: 700;
color: #666;
line-height: 1.4em;
border-top: 10px solid #555;
}
/*************************************
Generate "lighting" using box shadows
**************************************/
.movie .poster,
.movie .info,
.movie .info header {
-webkit-transition: box-shadow 350ms;
-moz-transition: box-shadow 350ms;
transition: box-shadow 350ms;
}
.csstransforms3d .movie .poster {
box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}
.csstransforms3d .movie:hover .poster {
box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}
.csstransforms3d .movie .info,
.csstransforms3d .movie .info header {
box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}
.csstransforms3d .movie:hover .info,
.csstransforms3d .movie:hover .info header {
box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}
/*************************************
Posters and still images
**************************************/
.scene:nth-child(1) .movie .poster {
background-image: url(../img/poster01.jpg);
}
.scene:nth-child(2) .poster {
background-image: url(../img/poster02.jpg);
}
.scene:nth-child(3) .poster {
background-image: url(../img/poster03.jpg);
}
.scene:nth-child(1) .info header {
background-image: url(../img/still01.jpg);
}
.scene:nth-child(2) .info header {
background-image: url(../img/still02.jpg);
}
.scene:nth-child(3) .info header {
background-image: url(../img/still03.jpg);
}
/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster,
.no-csstransforms3d .movie .info {
position: relative;
}
/*************************************
Media Queries
**************************************/
@media screen and (max-width: 60.75em){
.scene {
float: none;
margin: 30px auto 60px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
<div class="wrapper">
<ul class="stage clearfix" >
<li class="scene">
<div class="movie i1" onclick="return true" id="attacker">
<div class="poster"></div>
<div class="info">
<header>
<h1>THE ATTACKER</h1>
<span class="year">1946</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with Clarence.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i2" onclick="return true" id="midfield">
<div class="poster"></div>
<div class="info">
<header>
<h1>THE MID-FIELDER</h1>
<span class="year">1951</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
A cattle baron takes in an orphaned boy and raises him, causing his own son to resent the boy. As they get older the resentment festers into hatred, and eventually the real son frames his stepbrother for fathering an illegitimate child that is actually his, seeing it as an opportunity to get his half-brother out of the way so he can have his father's empire all to himself.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i3" onclick="return true" id="defender">
<div class="poster"></div>
<div class="info">
<header>
<h1>The DEFENFER</h1>
<span class="year">1925</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i4" onclick="return true" id="goalkeeper">
<div class="poster"></div>
<div class="info">
<header>
<h1>The GOALKEEPER</h1>
<span class="year">1925</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
</p>
</div>
</div>
</li>
</ul>
</div><!-- /wrapper -->
</div><!-- /container -->
我尝试给 body 一个 id,但这不起作用,因为悬停时的 div 有一个 after 属性可以翻转它,所以很少有领带可以改变背景,因此这种技术失败了
最佳答案
$('div').addClass('body');
$('div').on('mouseenter',function(){
$('div').addClass('hover');
$('div').removeClass('body');
});
$('div').on('mouseleave',function(){
$('div').addClass('body');
$('div').removeClass('hover');
});
.body{
background-color:#000;
color:#fff;
}
.hover{
background-color:#fff;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">Body</div>
就像这样。
关于jquery - 如果不悬停在 div 上,则将主体颜色更改回白色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45771401/
我试图将护照逻辑放入 Controller 文件中,但问题是当我将逻辑放入 Controller 中时,它告诉我“无法读取未定义的属性“主体””,但是当我将代码移至索引时,所有内容都会路由向右走 in
我正在学习 Javascript,我正在尝试创建一个简单的下拉菜单。我想要的功能的一个例子可以在谷歌主页的顶部菜单中看到,带有“更多”和“设置”下拉菜单。具体来说,当您单击关闭菜单时,菜单会消失。 我
我正在努力让 Swagger 正确呈现我的 ServiceStack 服务。 我希望看到一个 UserId 字符串作为表单参数,一个 PrivateCustomer 对象作为主体参数,但是尽管 Use
注意:由于随后的研究,这个问题已经完全重组。 我正在尝试从 Shiro 的主题 PrincipalCollection 中检索值.我在集合中添加了两个主体。 Username和 UUID .当我试图记
我们正在开发一个将 OAuth 2 用于两个用例的应用程序: 访问后端微服务(使用 client_credentials) 验证应用程序的用户(使用 authorization_code ,因此将用户
我有这段代码生成一个将 myNumber 乘以 5 的委托(delegate) ParameterExpression numParam = Expression.Parameter(typeof(i
我有一些jquery, $( document ).ready(function() { body=$(body).html; $("html").html(body); }); 这应
我创建了一个通用异常 DTO,它也扩展了 RuntimeException。通过这种方式,可以在应用程序中使用它,也可以将其用作 DTO。问题是当我将 DTO 应用于 ResponseEntity 构
在 Angular 5 HttpClient 中,我可以通过这种方式设置 HttpParams()。 const body = new HttpParams() .set('email', '
我正在从 RabbitMQ 读取数据,如下所示: connection = factory.newConnection(); ch = connection.createChannel() ; Str
如何使用不同类型的调用和响应主体来改造 PUT?我有一个错误限制。类型必须相同 and 。响应bodie可以包含int值,但call不应该,因为当我用int值初始化CallBody对象时,它已经包
原则上我想做这样的事情: #grab some value from outer source (i.e. file or list defined by another programer) set
我知道如何使用TextureRegions 创建动画并将其应用于非box2d 游戏中的对象。 但是在 libgdx 的 box2d 中,我不知道该怎么做。在CocosD2中,Sprite对象中有run
我有这段代码生成一个将 myNumber 乘以 5 的委托(delegate) ParameterExpression numParam = Expression.Parameter(typeof(i
我已经计算了花括号的数量,但无法弄清楚为什么类主体不完整。每次我试图修复类(class)时,都会把整个类(class)弄乱。问题出在代码中的最后一个类。最后一个花括号给我带来了类里面的麻烦。我正在使用
有人知道吗?我只能看到 ApplyTorque 和 SetAngularVelocity,我只想在将对象添加到模拟之前旋转对象,例如:所以我有一个 crate 倾斜靠在墙上,另一个 crate 是平的
我可以获得如何让图像出现在 box2d 主体上的简单答案吗?我尝试为图像和主体创建 x 和 y int,但是一旦主体移动,图像就会保持静态。如果您确实回答,请尽可能解释一下代码。如果您对我的完整源代码
我知道我可以通过使用 PolygonRegion 来做到这一点,但问题是我使用 scene2d.Stage 和几个 Actor 。您可能知道阶段使用 SpriteBatch 而我无法渲染 Polygo
您好,我有以下代码: function redirect(){ window.location.href='logged_out_chat.php'; } ...在我的标题和以下正文标记中:
我在 didBegin(contact:) 中触发了 SpriteKit 物理接触。我为要移出屏幕的 Dot 对象的实例抓取物理体,但是当我尝试像这样更改其位置时,没有任何反应: 第一种方法 /* I
我是一名优秀的程序员,十分优秀!