5
Tôi có CSS + HTML code này:CSS3 - “kết nối” 2 lớp hình ảnh động
<!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>
Bạn có thể tìm thấy ví dụ sống here. Vấn đề ở đây là có điều gì đó sai trong mã jQuery thứ hai. Tôi muốn rằng mỗi khi tôi đặt con chuột vào hộp hoặc trên tam giác, cả hai sẽ thay đổi màu sắc với nhau. Khi tôi đặt con chuột vào hộp nó hoạt động tốt, nhưng khi tôi đặt con chuột vào tam giác nó không hoạt động.
Bất kỳ đề xuất nào về cách sửa mã này?
Cảm ơn bạn! Nó hoạt động! –