Question

我有六个元素，当我将鼠标悬停在底部的三个按钮中时，它们应该改变颜色。不仅当我将鼠标悬停在它们上时，而且当我单击该按钮时，这些元素的颜色都应保持不变，并且在下次单击时，我希望它变回黑色。

我成功地将元素悬停在按钮上时会更改颜色，但是我无法使其在单击时保持不变。

在所有内容的顶部，将元素悬停在其自身的元素中（而不是通过底部的按钮），元素将变为白色。

这是我尝试过的链接。

$(document).ready(function() {


    $(".colonybutton").hover(
    function() {
        //mouse over
        $(this).css('color', '#b8aa85');
        $(".colony_element").css('fill', '#b8aa85');
    }, function() {
        //mouse out
        $(".colony_element").css('fill', "#000000");
        $(this).css('color', "#000000");

    });


    $(".prisonbutton").hover(
    function() {
        //mouse over
        $(this).css('color', '#3268bf');
        $(".prison_element").css('fill', '#3268bf');
    }, function() {
        //mouse out

        $(this).css('color', "#000000");
        $(".prison_element").css('fill', "#000000");
    });


    $(".openbutton").hover(
    function() {
        //mouse over
        $(this).css('color', '#e4cb3e');
        $(".open_element").css('fill', '#e4cb3e');
    }, function() {
        //mouse out
        $(this).css('color', "#000000");
         $(".open_element").css('fill', "#000000");
    });



});

Answer 1

为了使它正常工作，我对您的原始代码进行了一些修改：

修复了SVG标记中缺少的结束</g>
已注册的点击侦听器以及用于切换类active的鼠标悬停
为点的.active状态添加了CSS规则
与其在鼠标移开时将颜色显式设置为黑色，不如通过将css属性设置为空字符串来将其重置，因此您不需要!important上的:hover来着色白色的圆点

您可能还希望通过JS更改颜色/填充的所有设置，以在悬停/鼠标移出时添加和删除类，因此可以通过CSS在单个位置设置颜色。

$(document).ready(function() {
  $(".colony_button").hover(
    function() {
      //mouse over
      $(this).css('color', '#b8aa85');
      $(".colony_element").css('fill', '#b8aa85');
    },
    function() {
      //mouse out
      $(".colony_element").css('fill', "");
      $(this).css('color', "");

    }).click(function() {
      $(".colony_element").toggleClass('active');
    });

  $(".prison_button").hover(
    function() {
      //mouse over
      $(this).css('color', '#3268bf');
      $(".prison_element").css('fill', '#3268bf');
    },
    function() {
      //mouse out

      $(this).css('color', "");
      $(".prison_element").css('fill', "");
    }).click(function() {
      $(".prison_element").toggleClass('active');
    });


  $(".open_button").hover(
    function() {
      //mouse over
      $(this).css('color', '#e4cb3e');
      $(".open_element").css('fill', '#e4cb3e');
    },
    function() {
      //mouse out
      $(this).css('color', "");
      $(".open_element").css('fill', "");
    }).click(function() {
      $(".open_element").toggleClass('active');
    });
});

.geomap {
  top: 0;
  width: 100%;
  cursor: grab;
}

.timeline {
  font-size: 2vw;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(204, 204, 204, 0.5);
  padding: 1em 2em 1em 2em;
  margin: 1em;
  border-radius: 1.4em;
  text-align: center;
}

.colonybutton,
.prisonbutton,
.openbutton {
  width: 1em;
  padding: 0.3em 4em 0 4em;
  margin: 0;
}

.colony_button:hover,
.prison_button:hover,
.open_button:hover {
  cursor: pointer;
}

.colony,
.prison,
.open {
  display: inline-block;
  /*margin-bottom: 1em;*/
  padding: 0;
}

.colony_element,
.open_element,
.prison_element {
  transition: 0.8s;
}

.colony_element.active {
  fill: #b8aa85;
}

.prison_element.active {
  fill: #3268bf;
}

.open_element.active {
  fill: #e4cb3e;
}

.colony_element:hover,
.open_element:hover,
.prison_element:hover {
  fill: white;
  transition: 0.8s;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg class="geomap" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1331.7 883" style="enable-background:new 0 0 1331.7 883;" xml:space="preserve">



<g id="colony_projects">
	<circle class="colony_element" cx="618" cy="411.2" r="8"/>
	<circle class="colony_element" cx="666.8" cy="274.8" r="8"/>

</g>
<g id="prison_projects">
	<circle class="prison_element" cx="461.2" cy="156.6" r="8"/>
	<circle class="prison_element" cx="456.9" cy="163.5" r="8"/>

</g>
<g id="open_projects">
	<circle class="open_element" cx="522.8" cy="275.8" r="8"/>
	<circle class="open_element" cx="352.8" cy="451" r="8"/>
</g>
	</svg>

<div class="timeline">

  <div class="timetext">
    <div class="colony">
      <div class="colony_button">&#11044;</div>

    </div>
    <div class="prison">
      <div class="prison_button">&#11044;</div>
    </div>
    <div class="open">
      <div class="open_button">&#11044;</div>
    </div>
  </div>
</div>

Answer 2

原始代码中的内容太多了。因此，我将为您提供所需的简化版本。

https://jsfiddle.net/2hjm0tnb/

简而言之，您想创建一个新类并对其进行操作。

假设这是您正在使用的3个元素。您希望他们使用同一个类来缩短代码

Cursor.execute()

在CSS中，我们使用原始类进行原始样式设计，并添加另一个类进行更改

<div class="testclass"></div>
<div class="testclass"></div>
<div class="testclass"></div>

悬停并单击->更改颜色，再次单击切换到原始ccolor

2 个答案: