Bootstrap縮略圖div強調了懸停的後代段落

Question

我使用bootstrap創建縮略圖。 不幸的是，當我將鼠標懸停在縮略圖上時，縮略圖div中的段落被加下劃線。我不喜歡下劃線，想要擺脫它。

我試圖擺脫下劃線刪除下劃線使用蠻力（例如我追加了下面的CSS和jQuery腳本到我的HTML文件），但仍然沒有成功。

<div class="container-fluid"> 
    <div class="row"> 
    {% for object in object_list %} 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
     <a href="{% url 'restaurant:food_detail' pk=object.pk%}"> 
     <div class="thumbnail"> 
      <img src="/media/{{object.docfile}}" alt="..."> 
      <div class="caption"> 
       <h3>{{object.name}}</h3> 
       <p class="thumb-paragraph"> 
        {{object.description}} 
       </p> 
       <p class="thumb-price-tag"> 
        {{object.price}} 
       </p> 
       <form action="{% url 'restaurant:index_submit' %}" method="post"> 
        {% csrf_token %} 
        <input type="hidden" value="{{object.pk}}" name="hidden"> 
        <input type="submit" value="Add to Cart" class="btn btn-primary"> 
       </form> 
      </div> 
     </div> 
     </a> 
    </div> 
    {% empty %} 

    {% endfor %} 
    </div> 
</div> 

CSS和jQuery：

<style> 
.thumbnail:hover{ 
     text-decoration: none; 
} 
.thumb-paragraph:hover{ 
    text-decoration: none; 
} 
</style> 

<style> 
.caption{ 
    text-decoration: none; 
} 
</style> 


<script> 
     $(document).ready(function(){ 
      $(".thumbnail").hover(function(){ 
       $(this).find("p").css("text-decoration", "none"); 

      }, 
      function(){ 
       $(this).find("p").css("text-decoration", "none"); 
      }); 
     }); 
</script> 

Answer 1

你把所有的屬性到<a>標籤。所以，text-decoration即將到來。只是刪除爲<a>

<style> 
    a:hover {text-decoration: none;} 
</style>