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

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

{

  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>