我可以在CSS中使链接无效吗?

Question

我有一个事件列表，由于某种原因，我的第一个事件的名称显示为链接。我没有link_to或a href标签，没有其他想法会导致该事件是链接的……没有相关的Divs或样式。因此，我试图通过使其无效，但使用代码

来掩盖问题

.inactivate {
   pointer-events: none;
   cursor: default;
}

我的第一个事件的名称仍然显示为活动链接我的html

<% @events.each do |e| %>
<div class="wrp">
<div class="otw">
<div class="edate">
<span class="strf"><%= e.created_at.strftime("%b").to_s %></span>
<span class="strf"><%= e.created_at.strftime("%d").to_s %></span>
<span class="strf"><%= e.created_at.strftime("%Y").to_s %></span>
</div>
<div class="otr">
<span class="inactivate"><%= e.name %></span>
<%= link_to "Tables View", event_path(e)%>
<%= link_to "Reservations", event_reservations_path(e)%>
<%= link_to "Guestlist", event_guestlists_path(e)%>
<%= link_to "Manage Inventory", event_path(e)%>
<%= link_to "Promote", event_path(e)%><br>
</div>
</div>
</div>
<% end %>

我正在使用跨度类"灭活"，但我无法正常工作。有什么建议吗？

生成的HTML是

<div class="otw">
    <a href="events/new">
        <div class="edate">
            <span class="strf">Feb</span>
            <span class="strf">02</span>
            <span class="strf">2017</span>
        </div>
    </a>
    <div class="otr">
        <a href="events/new">
            <span class="non">mjq wednesday</span>
        </a>
        <a href="/events/1">Tables View</a>
        <a href="/events/1/reservations">Reservations</a>
        <a href="/events/1/guestlists">Guestlist</a>
        <a href="/events/1">Manage Inventory</a>
        <a href="/events/1">Promote</a><br>
    </div>
</div>

它显示了a href="events/new"。我唯一拥有标签的地方，我有

<div>
<ul class="uni">
   <li class="evn"><a class="active" href="#home">Home</a></li>
   <li><div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
      <% @venus.each do |v| %>
      <%= link_to v.name, venue_path(v) %>
      <% end %>
  </div>
</li>
   <li class="uli"><a href="#news">News</a></li>
   <li class="uli"><a href="#contact">Contact</a></li>
   <li class="uli"><a href="events/new">Add New Event</li>
</ul>
</div>

，但无论如何都没有连接。？

Answer 1

看起来您可能会在此行上错过关闭的锚标记：

<li class="uli"><a href="events/new">Add New Event</li>

这可能导致您的浏览器多次渲染锚标签 遇到的每个块元素，直到关闭标签或页面末端。

Answer 2

应该有效，尽管这很丑陋：

.inactivate {
   pointer-events: none;
   cursor: default;
   text-decoration: none;
   color: /* some common color */
}
.inactivate:hover {
   pointer-events: none;
   cursor: default;
   text-decoration: none;
   color: /* some common color */
}
.inactivate:active {
   pointer-events: none;
   cursor: default;
   text-decoration: none;
   color: /* some common color */
}

最终您可以尝试如果上面的所有代码中的所有行对您来说都是必要的，也许不是。