背景图像过渡在CSS中不起作用[重复]答案

【问题标题】：Background image transition not working in CSS [duplicate]背景图像过渡在CSS中不起作用[重复]
【发布时间】：2021-03-05 22:41:42
【问题描述】：

我已经为悬停效果设置了过渡 CSS 属性，但由于某种原因它不起作用。

HTML-

<div class = "menuItemBox" id = "Mughlai">
    <p class = "menuItemHeading">Mughlai</p> 
</div>

CSS-

.menuItemBox {
    border-style: solid;
    border-width: 5px;
    border-color: DC3D00;
    margin: 10px;
    width: 33%;
    height: 180px;
    background-size: cover;
}

#Mughlai {
    background-image: none;
    transition: 0.3s;
}

#Mughlai:hover {
    background-image: url("./images/Mughlai.jpg");
}

【问题讨论】：

还有#Mughlai:hover{...} ?
糟糕，我忘记粘贴一段 CSS。让我编辑我的问题。

标签： html css css-transitions

【解决方案1】：

将悬停添加到#Mughlai。

.menuItemBox {
    border-style: solid;
    border-width: 5px;
    border-color: DC3D00;
    margin: 10px;
    width: 33%;
    height: 180px;
    background-size: cover;
   transition: 0.3s;
}

#Mughlai:hover {
    background-image: none;
    transition: 0.3s;
   border-color: #ccc;
}

<div class = "menuItemBox" id = "Mughlai">
    <p class = "menuItemHeading">Mughlai</p> 
</div>

【讨论】：

糟糕，我忘记粘贴一段 CSS。让我编辑我的问题。