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>

Bootstrap缩略图div在悬停时强调后代段落

1 个答案: