Question

我已将整个缩略图设为链接，并在CSS中指定它的转换持续时间为0.3秒。不幸的是它不起作用。我尝试了很多东西，但似乎没有想到它。

这是相关的HTML代码：

<div class="row">
    <div class="col-sm-12 col-md-3 col-lg-3"> <a href="https://www.cars.com">
            <div class="thumbnail">
                <img src="car.jpg" alt="Car">
            </div>
        </a>
    </div>
</div>

这是相关的CSS代码：

.thumbnail{
    transition-duration: 1s;
}

.thumbnail:hover{
    box-shadow: 5px 5px 5px red;
    transition-duration: 1s;
}

有谁知道为什么会这样？/如何解决这个问题？任何帮助是极大的赞赏。

Answer 1

您缺少过渡属性。您需要指定要尝试设置动画的css属性。它可以是all，也可以是box-shadow。它应该是这样的：

.thumbnail{
    transition-duration: 1s;
}

.thumbnail:hover{
    box-shadow: 5px 5px 5px red;
    transition-duration: 1s;
    transition-property: box-shadow;

}

您可以在此处查看一个有效的示例： https://jsbin.com/qosusugige

关于CSS transitions in MDN的良好文档。

Answer 2

不仅缺少转换属性，而且bootstrap css样式表中的某个地方正在阻止转换使用public class calculator { public static void main(String s[]) { JFrame j=new JFrame(); j.setSize(400,600); JPanel p1=new JPanel(); JPanel p2=new JPanel(); p1.setSize(400, 100); p2.setSize(400, 500); p1.setLocation(0, 0); p2.setLocation(0, 100); p2.setLayout(new GridLayout(4,4)); j.add(p1); j.add(p2); JTextField txtfld=new JTextField(); txtfld.setSize(390, 92); txtfld.setLocation(5, 2); //txtfld.setVisible(true); p1.add(txtfld); j.setVisible(true); } }

!important

下面的代码段

.thumbnail{
  transition:box-shadow 0.3s !important;
    transition-duration: 1s;
}

.thumbnail:hover{
    box-shadow: 5px 5px 5px red;
}

.thumbnail{
  transition:box-shadow 0.3s !important;
    transition-duration: 1s;
}

.thumbnail:hover{
    box-shadow: 5px 5px 5px red;
}

转换持续时间不适用于bootstraps thumbnail：悬停

2 个答案: