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

时间：2019-11-15 10:44:51

标签： javascript jquery css

我有2个按钮

按钮1（蓝色）按钮2（橙色）

当我将鼠标悬停在按钮1上时，它变为橙色，当我将其悬停在按钮1上时，它再次变为蓝色，与橙色相同

现在，当我将鼠标悬停在按钮1（蓝色）上时，按钮2必须为蓝色，按钮1必须为橙色，当我将其悬空时，它必须返回到按钮1（蓝色）和按钮2（橙色）中

>

使用我的CSS和JavaScript脚本！我整天都在努力，对Web编码非常陌生！

$(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");
  });
});
*,
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;
}

.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>

2 个答案:

答案 0 :(得分：0)

这对您有用吗？ 

$(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");
  });
});

只需用这些功能替换您的功能

答案 1 :(得分：0)

您不需要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>

相关问题
最新问题