我正在尝试一个非常基本的过渡，但是在Safari上不正确。 我要做的就是在悬停时将背景图像从A更改为B。但是，当我第一次将鼠标悬停在元素上时，该转换不起作用。 第一次悬停时，它只是瞬间变化，而不是逐渐淡入/淡出。
JSFiddle在这里-https://jsfiddle.net/RalphCSD/z9nx30co/4/
如果这有任何区别，我正在使用Wordpress网站。
我还包括以下HTML和CSS。如果有人看到任何可能导致问题的错误，我将不胜感激。
function newStudentCalendar() {
var app = Spreadsheetapp;
var sheet = app.getactiveSpreadsheet().getactiveSheet();
var studentName = sheet.getRange(2,1).getvalue();
// set time variables for lesson creation
var year = sheet.getRange(2,5).getvalue();
var month = sheet.getRange(2,3).getvalue();
var day1 = sheet.getRange(2,4).getvalue();
var startTime = sheet.getRange(2,6).getvalue();
var endTime = sheet.getRange(2,7).getvalue();
//Creates the new students calendar
var calendar = CalendarApp.createCalendar(studentName);
Logger.log('Created the calendar "%s",with the ID "%s".',calendar.getName(),calendar.getId());
var calendarID = calendar.getId()
//Creates the recuring lessons
var lessons = CalendarApp.getcalendarById(calendarID).createEventSeries(studentName + " lesson",new Date(month + day1 + ',' + year + ' ' + startTime),' + year + ' ' + endTime),CalendarApp.newRecurrence().addWeeklyRule()
.onlyOnWeekdays([CalendarApp.Weekday.MONDAY,CalendarApp.Weekday.WEDnesDAY]));
Logger.log('Event Series ID: ' + lessons.getId());
}
.colBox {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
right: 0px;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
}
.colCon {
padding-top: 50px;
padding-left: 35px;
max-width: 200px;
color: white !important;
font-family: 'Montserrat',sans-serif;
}
.colHead {
color: white !important;
font-weight: 400 !important;
font-size: 12px !important;
}
.colHeadLg {
font-size: 40px;
font-weight: 700;
padding-top: 50px;
}
.colP {
font-size: 12px;
line-height: 16px;
}
.moreArrow {
font-size: 20px;
}
.colBox:hover {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");
-webkit-backface-visibility: hidden;
}
.hover-div {
width: 200px;
margin-top: 70px;
}
.hover-div .stuff {
margin-top: 0;
position: relative;
width: 100%;
z-index: 2;
-webkit-transition: margin-top 0.5s;
transition: margin-top 0.5s;
}
.hover-div .stuff-hidden {
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.hover-div:hover .stuff {
margin-top: -40px;
}
.hover-div:hover .stuff-hidden {
height: 40px;
}