引导缩略图 div 在悬停时为后代段落加下划线

Question

我正在使用引导程序创建缩略图。不幸的是，当我将鼠标悬停在缩略图上时，缩略图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>