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

Posted 2023-03-06

【中文标题】背景图像过渡在CSS中不起作用[重复]

【英文标题】：Background image transition not working in CSS [duplicate]

【发布时间】：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。让我编辑我的问题。

【参考方案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。让我编辑我的问题。