How to remove styling inherited from anchor tag-CodePudding

I have seen this question asked before, but none of the solutions seem to work for me or are using an "href", not a "link_to" in Rails, like I am.

I am trying to make my entire card clickable, I have done this by wrapping the contents in a "link_to". The problem is that all the text in the card is appearing as links by inheriting the "a" element's properties.

Thanks!

  <div >
    <% @challenges.each do |challenge|%>
      <%= link_to(challenge_path(challenge), class: "test") do %>
      <div >
          <img src= "<%= challenge.poster_url %>", alt="Challenge poster">
        <div >
          <div>
              <h2> <%= challenge.title %> </h2>
              <p> <%= challenge.description %> </p>
          </div>
          <div >
            <%= challenge.category %>
          </div>
        </div>
      </div>
      <% end %>
    <% end %>
  </div>

I have tried turning setting text-decoration to "none" on the h2 and p elements, turning off inheritance, and setting a tags to inherit all properties of parent to avoid it passing on its own attributes. But none of this has worked, any suggestions are appreciated!

CodePudding user response：

You have to set the styling to "none" on the anchor tag. Here is an example;

.parent {
  padding: 20px;
  background: #efefef;
  /* unset <a> styling */
  text-decoration: unset;
  color: inherit;
}

<a href="#" >
    <span>Text in anchor tag</span>
</a>

<a href="#">
    <span>Default Text in anchor tag</span>
</a>

In your case;

.test {
  /* ... your other style */
  text-decoration: unset;
  color: inherit;
}