Question

所以我有一个点导航，但是当我单击第三个点下方或三个点左侧时，有一个红色框突出显示，我已经尝试过user-select: none甚至是::selection属性，并将背景色设置为透明，但仍然突出显示，是否还有其他CSS属性或方法可以取消该设置？

$(document).ready(() => {
    document.getElementById("event").addEventListener("click", e => {
        const allItems = $('#event > li');

        for (let i = 0; i < allItems.length; i++) {
            allItems[i].classList.remove("is-active");
        }
        e.target.classList.add("is-active");
    })
});

html{
user-select: none;
}

::selection{
background-color: transparent;
}

.is-active{
  transform: scale(1.2);
  background: red !important;
}

#vertical-nav {
	 position: fixed;
	 z-index: 3;
	 right: 15px;
	 bottom: 0;
	 margin: auto 0;
	 height: 100%;
	 display: flex;
	 align-items: center;
}
 #vertical-nav ul > li {
	 background: black;
	 width: 13px;
	 height: 13px;
	 margin-bottom: 15px;
	 border-radius: 50%;
	 transition: 0.4s ease-in-out;
}
 #vertical-nav ul > li a {
	 display: none;
	 float: right;
	 color: black;
	 margin-right: 13px;
	 margin-top: -5px;
	 font-size: 10px;
	 transition: 0.4s ease-in-out;
	 padding: 3px;
	 border-radius: 10px;
}
 #vertical-nav ul > li:hover {
	 cursor: pointer;
	 transform: scale(1.2);
	 background: lightgrey;
}
 #vertical-nav ul > li:hover a {
	 //opacity: 1;
}
 #vertical-nav ul > li:hover a {
	 //opacity: 1;
}
 
 ul > li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="vertical-nav">
        <ul id="event">
          <li>
            <a data-number="1">Home</a>
          </li>
          <li>
            <a data-number="2">About</a>
          </li>
          <li>
            <a data-number="3">Contact</a>
          </li>
        </ul>
      </nav>

Answer 1

因为您要将事件侦听器添加到整个容器中。您应该只瞄准子弹。由于您使用的是jQuery，因此您还可以简化代码：

$(document).ready(() => {
  $("#event > li").click(function() {
    $('#event > li').removeClass('is-active')

    $(this).addClass("is-active");
  })
});

html {
  user-select: none;
}

::selection {
  background-color: transparent;
}

.is-active {
  transform: scale(1.2);
  background: red !important;
}

#vertical-nav {
  position: fixed;
  z-index: 3;
  right: 15px;
  bottom: 0;
  margin: auto 0;
  height: 100%;
  display: flex;
  align-items: center;
}

#vertical-nav ul>li {
  background: black;
  width: 13px;
  height: 13px;
  margin-bottom: 15px;
  border-radius: 50%;
  transition: 0.4s ease-in-out;
}

#vertical-nav ul>li a {
  opacity: 0;
  float: right;
  color: black;
  margin-right: 13px;
  margin-top: -5px;
  font-size: 10px;
  transition: 0.4s ease-in-out;
  padding: 3px;
  border-radius: 10px;
}

#vertical-nav ul>li:hover {
  cursor: pointer;
  transform: scale(1.2);
  background: lightgrey;
}

#vertical-nav ul>li:hover a {
  //opacity: 1;
}

#vertical-nav ul>li:hover a {
  //opacity: 1;
}

ul>li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="vertical-nav">
  <ul id="event">
    <li>
      <a data-number="1">Home</a>
    </li>
    <li>
      <a data-number="2">About</a>
    </li>
    <li>
      <a data-number="3">Contact</a>
    </li>
  </ul>
</nav>

Answer 2

为什么不完全使用jQuery而不检查UL的点击

您的代码存在的问题是，当您单击LI旁边的时，您将UL添加为活动状态

export const setCheckBoxKey(key){
   return { ...state, key }
};

const apiReducer(state, action) {
  const newResponseObject = {...state.responseObject, [state.key]: action.payload.data }; // where action.payload.data is your api response which is an array

  return {...state, responseObject: newResponseObject };
}

$(document).ready(() => {
  $("#event li").on("click", function() {
    $(this).siblings().removeClass("is-active");
    $(this).addClass("is-active");
  })
});

Answer 3

一个简单的css解决方案就是

a.is-active{
  transform: scale(1.2);
  background: red !important;
}

元素的不必要的突出显示

3 个答案: