Jquery CSS3-&x201C；连接”；2类动画
我有以下CSS+HTML代码：Jquery CSS3-&x201C；连接”；2类动画,jquery,css,animation,hover,Jquery,Css,Animation,Hover,我有以下CSS+HTML代码： <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>What</title> <style type="text/css"> #page { widt
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>What</title>
<style type="text/css">
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
}
#box1 {
position: relative;
width: 500px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 300px;
top: 250px;
height: 150px;
-webkit-transition: all 1s;
font-size: large;
color: Black;
padding: 10px;
background: #D0D0D0;
opacity: 0;
}
@-webkit-keyframes myFirst {
0% {
right: 300px;
top: 150px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
;
right: 300px;
top: 200px;
opacity: 1;
}
}
#littlebox1 {
top: 200px;
position: absolute;
display: inline-block;
}
.littlebox1-sentence {
font-size: large;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 25px;
padding-right: 10px;
background: #D0D0D0;
border-radius: 10px; -webkit-transition: background .25s ease-in-out;
}
#littlebox1:hover ~ #box1 {
-webkit-transition: all 0s;
background: #909090;;
right: 300px;
top: 200px;
-webkit-animation: myFirst 1s;
-webkit-animation-fill-mode: initial;
opacity: 1;
}
.littlebox1-sentence:hover {
background: #909090;
}
.littlebox1-sentence:hover + .triangle {
border-right: 50px solid #909090;
}
.triangle {
position: relative;
width: 0;
height: 0;
border-right: 50px solid #D0D0D0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
right: 160px; -webkit-transition: border-right .25s ease-in-out;
}
.triangle:hover {
border-right:50px solid #909090;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$('.littlebox1-sentence').hover(function() {
$(this).css('background', '#909090');
$('.triangle').css('border-right', '50px solid #909090');
});
</script>
<script> $(function() {
$('.triangle').hover(function() {
$(this).css('border-right', '50px solid #909090');
$('.littlebox1-sentence').css('background', '#909090');
});
</script>
</head>
<body dir="rtl">
<div id="page">
<div id="littlebox1" class="littlebox1-sentence">put your mouse here</div><div id="littlebox1" class="triangle"> </div>
<div id="box1">
</div>
</div>
</body>
</html>
什么
#页面{
宽度：900px；
填充：0px；
保证金：0自动；
方向：rtl；
位置：相对位置；
}
#框1{
位置：相对位置；
宽度：500px；
边框：1px纯黑；
盒影：-3px 8px 34px#808080；
边界半径：20px；
盒影：-8px 5px 5px#8888888；
右：300px；
顶部：250px；
高度：150像素；
-webkit转换：所有1；
字体大小：大号；
颜色：黑色；
填充：10px；
背景：#d0；
不透明度：0；
}
@-webkit为myFirst设置关键帧{
0% {
右：300px；
顶部：150px；
背景：#d0；
不透明度：0；
}
100% {
背景#9090；
;
右：300px；
顶部：200px；
不透明度：1；
}
}
#小盒子1{
顶部：200px；
位置：绝对位置；
显示：内联块；
}
.littlebox1句{
字体大小：大号；
垫底：15px；
填充顶部：15px；
左侧填充：25px；
右边填充：10px；
背景：#d0；
边界半径：10px；-webkit转换：背景。25s易入易出；
}
#小盒子1：悬停~#盒子1{
-webkit转换：所有0；
背景：#9090；；
右：300px；
顶部：200px；
-webkit动画：我的第一个1s；
-webkit动画填充模式：初始；
不透明度：1；
}
.小盒子一句话：悬停{
背景#9090；
}
.littlebox1句子：悬停+三角形{
右边框：50px实心#909090；
}
.三角形{
位置：相对位置；
宽度：0；
身高：0；
右边框：50px实心#d0；
边框顶部：24px实心透明；
边框底部：24px实心透明；
右：160px；-webkit转换：右边框。25s易入易出；
}
.三角形：悬停{
右边框：50px实心#909090；
}
$（函数（）{
$（'.littlebox1语句'）.hover（函数（）{
$（this.css（'background'，'#9090'）；
$（'.triangle'）.css（'border-right'，'50px solid#909090'）；
});
$（函数（）{
$（'.triangle'）。悬停（函数（）{
$（this.css（'border-right'，'50px solid#9090'）；
$（'.littlebox1句'）.css（'background'，'#909090'）；
});
把你的鼠标放在这里
有没有关于如何修复此代码的建议？只需将框和三角形包装在一个容器中，就可以使用CSS而不使用javascript，方法是在容器悬停状态下使用派生选择器：
#bothcontainer:hover ~ #box1 { ... }
#bothcontainer:hover .littlebox1-sentence { ... }
#bothcontainer:hover .triangle { ... }