鼠标开/鼠标关（悬停）问题
我有 2 个按钮
按钮 1（蓝色） 按钮 2（橙色）
当我将鼠标悬停在按钮 1 上时它变成橙色，当我将鼠标悬停时它再次变成蓝色，与橙色 OK 相同
现在我想要它，当我将鼠标悬停在按钮 1（蓝色）上时，按钮 2 必须是蓝色，按钮 1 必须是橙色，当我移开它时，它必须返回到按钮 1（蓝色）和按钮 2（橙色）
用我的 CSS 和 JavaScript 脚本！我一整天都在挣扎，我对网络编码很陌生！
$(document).ready(function() {
"use strict";
$('#slider-carousel').carouFredSel({
responsive: true,
width: '100%',
circular: true,
scroll: {
item: 1,
duration: 500,
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");
});
});
繁星coding浏览 169回答 2
2回答
-
慕妹3242003
这对你有用吗？$(document).ready(function() { $(".slider a.btn-half").mouseover(function() { $(".slider a.btn-full").css("background-color", "deepskyblue") $(".slider a.btn-half").css("background-color", "orange"); });});$(document).ready(function() { $(".slider a.btn-half").mouseout(function() { $(".slider a.btn-full").css("background-color", "orange"); $(".slider a.btn-half").css("background-color", "deepskyblue"); });});$(document).ready(function() { $(".slider a.btn-full").mouseover(function() { $(".slider a.btn-full").css("background-color", "deepskyblue"); $(".slider a.btn-half").css("background-color", "orange"); });});$(document).ready(function() { $(".slider a.btn-full").mouseout(function() { $(".slider a.btn-full").css("background-color", "orange"); $(".slider a.btn-half").css("background-color", "deepskyblue"); });});只需将您的功能替换为这些功能 -
蝴蝶不菲
您不需要 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>
随时随地看视频慕课网APP
相关分类
JavaScript