您不需要 jQuery 來執行此操作。您可以通過 CSS 僅使用“+”選擇器來實現這一點。我已經注釋掉了不必要的 JS 代碼。然后你可以添加這個CSS：
.slider a.btn-half:hover + a.btn-full
{
background-color: deepskyblue;
}
看這個例子：
$(document).ready(function() {
"use strict";
$('#slider-carousel').carouFredSel({
responsive: true,
width: '100%',
circular: true,
scroll: {
item: 1,
duration: 5000,
pauseOnHover: true
},
auto: true,
items: {
visible: {
min: 1,
max: 1
},
height: "variable"
},
pagination: {
container: ".sliderpager",
pageAnchorBuilder: false
}
});
});
/*
$(document).ready(function() {
$(".slider a.btn-half").mouseover(function() {
$(".slider a.btn-full").css("background-color", "deepskyblue");
});
});
$(document).ready(function() {
$(".slider a.btn-half").mouseout(function() {
$(".slider a.btn-full").css("background-color", "orange");
});
});
$(document).ready(function() {
$(".slider a.btn-full").mouseover(function() {
$(".slider a.btn-half").css("background-color", "deepskyblue");
});
});
$(document).ready(function() {
$(".slider a.btn-half").mouseout(function() {
$(".slider a.btn-full").css("background-color", "orange");
});
});
*/
*,
html,
body {
margin: 0;
padding: 0;
}
header {
background-color: deepskyblue;
height: 112px;
line-height: 112px;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
header nav {
float: right;
}
header nav ul li a {
padding-right: 30px;
font-weight: bold;
color: white;
transition: 0.5s ease-in;
}
header nav ul li a:hover {
text-decoration: none;
color: orange;
}
.img1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://via.placeholder.com/50);
background-size: 100% 100%;
}
.slider,
.slider ul,
.slider ul li {
height: 700px;
width: 100%;
color: white;
text-align: center;
}
.slider h2 {
font-weight: bold;
margin-top: 220px;
}
.slider span {
color: orange;
}
.slider a {
padding: 10px 50px;
;
margin-right: 10px;
}
.slider a.btn-half {
background-color: deepskyblue;
color: white;
transition: 0.5s ease-in;
}
.slider a.btn-half:hover {
opacity: 0.7;
color: deepskyblue;
background-color: orange;
font-weight: bold;
font-style: italic;
}
/* Add this css */
.slider a.btn-half:hover + a.btn-full
{
background-color: deepskyblue;
}
.slider a.btn-full {
background-color: orange;
color: white;
transition: 0.5s ease-in;
}
.slider a.btn-full:hover {
opacity: 0.7;
color: orange;
background-color: deepskyblue;
font-weight: bold;
font-style: italic;
}
.img2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://via.placeholder.com/50);
background-size: 100% 100%;
}
.img3 {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://via.placeholder.com/50);
background-size: 100% 100%;
}
.slider i {
font-size: 35px;
margin-right: 10px;
}
<!doctype html>
<html>
<head>
<title>Latinas Enteprises</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>
<script src="js/caroufredsel.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<a href="" class="logo"><img src="img/Logo2.png"></a>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Gallery </a></li>
<li><a href="">Contact</a></li>
<li><a href="">Our Team</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="slider">
<ul class="slidr-carousel" id="slider-carousel">
<li class="img1">
<h2>LATINAS <span>ENTERPRISES</span></h2>
<p>We Believe In Creativity Always</p>
<i class="fa fa-scissors"></i>
<i class="fa fa-female"></i>
<i class="fa fa-pencil"></i>
<p><br> A brush of perfection!
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Call us Now!</a>
</li>
<li class="img2">
<h2>LATINAS <span>ENTERPRISES</span></h2>
<p>We Believe In Creativity Always</p>
<i class="fa fa-scissors"></i>
<i class="fa fa-female"></i>
<i class="fa fa-pencil"></i>
<p><br> A brush of perfection!
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Call us Now!</a>
</li>
<li class="img3">
<h2>LATINAS <span>ENTERPRISES</span></h2>
<p>We Believe In Creativity Always</p>
<i class="fa fa-scissors"></i>
<i class="fa fa-female"></i>
<i class="fa fa-pencil"></i>
<p><br> A brush of perfection!
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Call us Now!</a>
</li>
</ul>
</section>
<script src="js/main.js"></script>
</body>
</html>
