使用 CSS 突出显示单击按钮

Question

我有多项选择，希望能够单击它来管理 /getmatch 页面上的答案。目前我没有视觉提示我选择了一些东西：

[]]1

那么如何使多个项目的选择具有响应性？

以下是页面中提供这些按钮的代码：

{% extends "todo/base.html" %}

{% block content %}

   <style>
      .elements {
        display: block;
      }
      ul.items {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li.item {
        flex: 1 0 20%;
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
      .col {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    </style>

  <!-- Header -->
  <header class="intro-header">
    <div class="container">
      <div class="col-lg-5 mr-auto order-lg-2">
      <h3><br>Tell me something about you... </h3>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <section class="content-section-a">

    <div class="container">
      <dt>
        <span>Pick the keywords you want to express when wearing perfume</span>
      </dt>

    <form action = "/getmatch" method="POST">
      {% for keyword in keywords %}
        <div class="elements">
            <ul class="items ">
               <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
                 <div class="box">
                 <div data-toogle="buttons" class="col">
                    <span>{{ keyword.title }}</span>
                 </div>
                 </div>
               </li>
            </ul>
        </div>
      {% endfor %}
      {% csrf_token %}
        <button type="submit">Envoyer</button>
    </form>
    </div>
  </section>

  <!-- Bootstrap core JavaScript -->
  <script src="static/vendor/jquery/jquery.min.js"></script>
  <script src="static/vendor/popper/popper.min.js"></script>
  <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >


{% endblock %}

我试图在balisa中添加一些东西。

button:hover{background-color:orange;}

button:focus{background-color:red;}

但它没有修改任何东西

Answer 1

我无法添加评论，因为我没有所需的代表点（堆栈溢出的新手，抱歉，如果不允许这样做），但我不确定你要做什么，如果你想要提供一个视觉提示，表明一次已为多个按钮选择了一个按钮，您需要获取按钮列表，在单击时添加一个事件侦听器来切换类的开/关，然后为该类添加样式，因此当项目具有该类时，它具有特定的样式。

编辑如何做到这一点： PS我从来没有使用过Django，但我认为你应该这样做，因为你这样做的方式是为每个关键字生成一个ul

<form action = "/getmatch" method="POST">
    <div class="elements">
        <ul class="items ">
  {% for keyword in keywords %}

           <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
             <div class="box">
             <div data-toogle="buttons" class="col">
                <span>{{ keyword.title }}</span>
             </div>
             </div>
           </li>
  {% endfor %}
        </ul>
    </div>
  {% csrf_token %}
    <button type="submit">Envoyer</button>
</form>

现在您需要选择列表元素，更简单的方法是事件委托https://javascript.info/event-delegation 所以创建一个脚本标签/或文件并导入它，在你的脚本中你需要以下内容：

  //Select the UL list
const myItemsList = document.querySelector(".items");

//function passed to event listener as callback, toggles the selected class if the target is a list

const toggleListClass = (event) => {
  let target = event.target;
  if (target.tagName !== "li") return;
  target.classList.toggle("highlight");
};

//Add an event listener to the ul list
myItemsList.addEventListener("click", toggleListClass);

现在在你的 css 中为类高亮添加一个选择器

.hightlight {
  color: whatever
}