当鼠标移到该区域时，过渡不会开始

Posted 2023-03-06

【中文标题】当鼠标移到该区域时，过渡不会开始

【英文标题】：Transition doesn't start when the mouse go on the area

【发布时间】：2018-09-24 18:29:34

【问题描述】：

我正在创建一个网站，但我在转换（我的 css 和我的 html）方面遇到了问题

.part1			
	background-image:url(https://zupimages.net/up/18/14/49pg.jpg);
	background-attachment:fixed;
	position:relative;
	top:185px;
	font-family:Yu Gothic UI Light;
	font-size:110%;
	width:100%;
	height:500px;
	text-align:right;
	padding-right:5%;
	padding-left:50%;
	vertical-align:center;
	box-sizing: border-box;
	border-radius:30;
	-webkit-border-radius:30;
	-moz-border-radius:30;
	-o-border-radius:30;
	-ms-border-radius:30;
	 -webkit-transition: -webkit-transform 2s ease-in-out; 
	 -moz-transition: -moz-transform 2s ease-in-out; 
	 -o-transition: -o-transform 2s ease-in-out;
	 transition: transform 2s ease-in-out;
	 -webkit-transition:font-size 0.5s ease-in-out; 
	 -moz-transition:font-size 0.5s ease-in-out; 
	 -o-transition:font-size 0.5s ease-in-out;
	 transition:font-size 0.5s ease-in-out;


.part1:hover		

	font-size:130%;
	-moz-box-shadow: 4px 4px 10px #888;  
	-webkit-box-shadow: 4px 4px 10px #888;  
	box-shadow:4px 4px 6px #888;
	-moz-border-radius: 15px;
	-webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, -webkit-transform 0.5s ease-in-out;
	-webkit-transform: scale(1.05); 
	-moz-transform: scale(1.05); 
	-o-transform: scale(1.05); 
	transform: scale(1.05);

<div class="part1">
<p>Nous créons des sites internet pour vous, rapidement et facilement. Pour <span class="blogs">une utilisation personnelle (blogs)</span> ou <span class="official">professionnelle (site officiel de l’entreprise avec un magasin en ligne)</span>, nous vous proposons des services.</p>
</div>

为什么当鼠标移到“part1”区域时过渡没有开始？以及为什么半径在 Chrome 中不起作用，但在 Edge 中起作用！

【参考方案1】：

对于半径，您忘记在边界半径后添加 px 单位。这是正确的代码：

.part1          
    background-image:url(https://zupimages.net/up/18/14/49pg.jpg);
    background-attachment:fixed;
    position:relative;
    top:185px;
    font-family:Yu Gothic UI Light;
    font-size:110%;
    width:100%;
    height:500px;
    text-align:right;
    padding-right:5%;
    padding-left:50%;
    vertical-align:center;
    box-sizing: border-box;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -o-border-radius:30px;
    -ms-border-radius:30px;
     -webkit-transition: -webkit-transform 2s ease-in-out; 
     -moz-transition: -moz-transform 2s ease-in-out; 
     -o-transition: -o-transform 2s ease-in-out;
     transition: transform 2s ease-in-out;
     -webkit-transition:font-size 0.5s ease-in-out; 
     -moz-transition:font-size 0.5s ease-in-out; 
     -o-transition:font-size 0.5s ease-in-out;
     transition:font-size 0.5s ease-in-out;


.part1:hover        

    font-size:130%;
    -moz-box-shadow: 4px 4px 10px #888;  
    -webkit-box-shadow: 4px 4px 10px #888;  
    box-shadow:4px 4px 6px #888;
    -moz-border-radius: 15px;
    -webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, -webkit-transform 0.5s ease-in-out;
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    transform: scale(1.05);