javascript - 单击和悬停的连续 CSS 效果

标签 javascript jquery css

将鼠标悬停在红色按钮上。我想要这种悬停效果，直到移除鼠标。另:点击绿色按钮时，会保持点击样式。

$(document).ready(function() {
  $("#color1").hover(function() {
    $(".bg-img").css({
      "background-image": "url('assets/img/black.png')"
    });
  }, function() {
    $(".bg-img").css({
      "background-image": "url('assets/img/SMF98.png')"
    });
  });

  $('#color2').click(function() {
    $(".bg-img").css({
      "background-image": "url('assets/img/green.png')"
    });
    $('#color2').addClass("Blink");
  });

  $('#color3').click(function() {
    $(".bg-img").css({
      "background-image": "url('assets/img/red.png')"
    });
  });
});
.bg-img {
  background-image: url("assets/img/SMF98.png");
  height: -webkit-fill-available;
}

.hovicon {
  display: inline-block;
  font-size: 45px;
  line-height: 90px;
  cursor: pointer;
  margin: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  text-decoration: none;
  z-index: 1;
  color: #fff;
}

.hovicon.small {
  font-size: 20px;
  line-height: 45px;
  width: 45px;
  height: 45px;
  margin: 7px;
}

.hovicon.mini {
  font-size: 15px;
  line-height: 32px;
  width: 30px;
  height: 30px;
  margin: 7px;
}

.hovicon.auto-width {
  width: auto;
  height: auto;
  padding: 15px;
}

.hovicon:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.hovicon:before {
  speak: none;
  font-size: 48px;
  line-height: 90px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}

.hovicon.effect-2 {
  color: #eea303;
  box-shadow: 0 0 0 3px #000;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s;
}

.hovicon.effect-2:after {
  top: -2px;
  left: -2px;
  padding: 2px;
  z-index: -1;
  background: #000;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
}

.color2.effect-2:after {
  background: green!important;
}

.color2.effect-2 {
  box-shadow: 0 0 0 3px green;
}

.color3.effect-2:after {
  background: darkred!important;
}

.color3.effect-2 {
  box-shadow: 0 0 0 3px darkred;
}


/* Effect 2a */

.hovicon.effect-2.sub-a:hover,
.hovicon.effect-2.sub-a:hover i {
  color: #eea303;
}

.hovicon.effect-2.sub-a:hover:after {
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85);
  -ms-transform: scale(0.85);
  transform: scale(0.85);
}


/* Effect 2b */

.hovicon.effect-2.sub-b:hover:after {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
  -moz-transition: -moz-transform 0.4s, opacity 0.2s;
  transition: transform 0.4s, opacity 0.2s;
}

.hovicon.effect-2.sub-b:hover,
.hovicon.effect-2.sub-b:hover i {
  color: #fff;
}

.navigation-clean-button .action-button,
.navigation-clean-button .action-button:active {
  background: #56c6c6!important;
  border-radius: 20px!important;
  font-size: inherit!important;
  color: #fff!important;
  box-shadow: none!important;
  border: none!important;
  text-shadow: none!important;
  padding: .5rem 1rem!important;
  transition: background-color 0.25s!important;
  font-size: inherit!important;
}

.navigation-clean-button .actions {
  margin-top: 1px!important;
  padding-top: 0!important;
  padding-bottom: 1.5rem!important;
}

@media only screen and (max-width: 576px) {
  .row1 {
    display: list-item;
  }
  .hovicon {
    margin: 20px 0;
    width: 30px;
    height: 30px;
  }
}

.Blink {
  animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


/* Effect 8 */

.hovicon.effect-8 {
  background: red;
  -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
  -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
  transition: transform ease-out 0.1s, background 0.2s;
}

.hovicon.effect-8:after {
  top: 0;
  left: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  opacity: 0;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.hovicon.effect-8:hover {
  background: red;
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
  color: #fff;
}

.hovicon.effect-8:hover i {
  color: #fff;
}

.hovicon.effect-8:hover:after {
  -webkit-animation: sonarEffect 1.3s ease-out 75ms;
  -moz-animation: sonarEffect 1.3s ease-out 75ms;
  animation: sonarEffect 1.3s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
}

@-moz-keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    -moz-transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ABeeZee">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aclonica">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alex+Brush">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allan">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amaranth">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amita">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400|Roboto:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans">

<nav class="navbar navbar-light navbar-expand fixed-bottom bg-dark navbar-fixed-top navigation-clean-button">
  <div class="container-fluid"><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"></button>
    <div class="collapse navbar-collapse" id="navcol-1">

      <div class="col-md-11 col-sm-11 col-lg-11 col-xl-11 col-8">
        <div class="container">
          <div class="row">
            <div class="col-sm-4 col-md-5 col-lg-5 col-1 col-xl-5"></div>

            <div class="col-sm-4 col-md-4 col-lg-4 col-10 col-xl-4">
              <div class="row">
                <div class="col-sm-4 col-md-4 col-lg-4 col-4 col-xl-4">
                  <span id="color1">
                                            <div class="block">
                                                <div class="hovicon effect-2 sub-a color1"></div>
                                            </div>
                                        </span>
                </div>

                <div class="col-sm-4 col-md-4 col-lg-4 col-4 col-xl-4">
                  <span id="color2">
                                            <div class="block">
                                                <div class="hovicon effect-2 sub-a color2"></div>
                                            </div>
                                        </span>
                </div>

                <div class="col-sm-4 col-md-4 col-lg-4 col-4 col-xl-4">
                  <span id="color3">
                                            <div class="block">
                                                <div class="hovicon effect-8 sub-a color3"></div>
                                            </div>
                                        </span>
                </div>
              </div>
            </div>

            <div class="col-sm-4 col-md-3 col-lg-3 col-1 col-xl-3"></div>
          </div>
        </div>
      </div>
      <div class="col-md-1 col-sm-1 col-lg-1 col-xl-1 col-4">
        <p class="ml-auto float-right navbar-text actions">
          <a class="btn btn-success btn-lg action-button" role="button" href="https://www.myaurochs.com/product/infinity/" data-bs-hover-animate="pulse" style="background-color:#2ec56a;">Buy Now</a>
        </p>
      </div>
    </div>

  </div>
</nav>
<section>
  <div class="bg-img">

  </div>
  <!--<img src="assets/img/SMF98.png" class="bg-img" width="100%">-->
</section>

http://jsfiddle.net/qsc206v7/2/

最佳答案

红圈的解决方案

无法通过 Javascript 将类添加到伪元素(对于绿色圆圈)，因此您必须想出一个替代方法。

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.hovicon {
  display: inline-block;
  font-size: 45px;
  line-height: 90px;
  cursor: pointer;
  margin: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  text-decoration: none;
  z-index: 1;
  color: #fff;
}

.hovicon:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.hovicon:before {
  speak: none;
  font-size: 48px;
  line-height: 90px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}


/* Effect 8 */

.hovicon.effect-8 {
  background: red;
  transition: transform ease-out 0.1s, background 0.2s;
}

.hovicon.effect-8:after {
  top: 0;
  left: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: scale(0.9);
}

.hovicon.effect-8:hover {
  background: red;
  transform: scale(0.93);
  color: #fff;
}

.hovicon.effect-8:hover i {
  color: #fff;
}

.hovicon.effect-8:hover:after {
  animation: sonarEffect 1.3s ease-out 75ms infinite;
}

@keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
<div class="hovicon effect-8 sub-a color3"></div>

绿色圆圈的解决方案

对于绿色圆圈，我在里面制作了一个新的 div，其样式类似于带有 display: none; 的白色圆圈，并使用 jQuery 在点击时切换 display。

$(".green").click(function(){
	$(".innerCircle").toggleClass("show");
})
* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.green {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: green;
}

.innerCircle {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid white;
  display: none;
}

.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="green">
  <div class="innerCircle"></div>
</div>

关于javascript - 单击和悬停的连续 CSS 效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50693822/

上一篇：html - 为什么网页不能平滑滚动？

下一篇：css - 找不到 CSS 错误

相关文章：

javascript - 选项卡事件中的 JQuery onchange

jquery - Bootstrap容器流体有左右边距

javascript - 在 chrome 中缩小到 25% 时，div 中的元素超出范围(不在 div 内)

javascript - 如何获取动态创建的 slider 的值？

javascript - 使用ajax发送多个变量的最佳实践

javascript - 将选定的行从 html 表加载到数组

javascript - 从js代码赋值给mvc razor的隐藏字段

javascript - SVG 矩形的一致填充

javascript - 为什么影子在错误的地方？ (三.js)

jquery - 通过 br 标签分割行并添加 span 标签

©2024 IT工具网  联系我们