鼠标开/鼠标关（悬停）问题

Question

我有 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");

  });

});

Answer 1

这对你有用吗？$(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");  });});只需将您的功能替换为这些功能

Answer 2

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