Html 当div悬停时，转换持续时间对子级不起作用_Html_Css_Web

Html 当div悬停时，转换持续时间对子级不起作用

html css web

Html 当div悬停时，转换持续时间对子级不起作用,html,css,web,Html,Css,Web,在这段代码中，当div悬停时显示p，并希望它平滑地发生在我放置了一个转换持续时间但不起作用。任何人都可以给出解决方案。您无法转换display属性。您需要使用不透明度来实现该效果 p{ 填充：20px；不透明度：0；过渡：线性； } 分区：悬停p{ 不透明度：1； } 你好，波特嗨，普拉吉 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

在这段代码中，当div悬停时显示p，并希望它平滑地发生在我放置了一个转换持续时间但不起作用。任何人都可以给出解决方案。

您无法转换display属性。您需要使用不透明度来实现该效果

p{
填充：20px；
不透明度：0；
过渡：线性；
}
分区：悬停p{
不透明度：1；
}

你好，波特
嗨，普拉吉

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Transitions</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
   <div>hi potter
      <p>Hi Prajith.</p>
   </div>
</body>

p
{
    display: none;
    padding: 20px;
    transition-duration: 2s;
}


div:hover p
{

    display: block;
}