使用鼠標移上元素變寬的效果可以使用CSS3來實現，這樣就可以在網頁中加入更加豐富的交互效果。下面就來介紹一下如何實現這一效果。

.hover-element{
width: 100px;
transition: width 0.3s ease-in-out;
}
.hover-element:hover{
width: 150px;
}

上述代碼中，“.hover-element”是要操作的元素的類名，加上:hover偽類，代表當鼠標懸停在該元素上時觸發效果。在該類中，元素的寬度為100px，同時添加了過渡效果，以實現寬度變化的平滑過渡。而在:hover中，則將元素的寬度改為150px，這樣鼠標懸停在元素上時，元素就會變寬。

需要注意的是，僅當元素原本的寬度小于:hover中定義的寬度時，才會觸發寬度變化的效果。否則，元素將一直保持:hover中定義的寬度。

總的來說，使用CSS3實現鼠標移上元素變寬的效果非常簡單，只需要使用transition和:hover兩個屬性就能輕松實現。在網頁設計中，這一效果往往可以使頁面更加生動有趣，也更加符合現代感強的設計趨勢。