Html Wordpress可视化编辑器帮助/鼠标悬停时更改边框

我正试图在Wordpress可视化编辑器中进行一些更改。基本上，我已经在图像周围有了一个边框，当鼠标悬停时，我希望边框改变宽度和填充。这是我目前的代码：

img class="wp-image-162 size-medium aligncenter" 
style="border: 5px solid #696262; 
padding: 5px; 
margin: 0px;" 

我应该添加什么代码，以便在鼠标触摸图像时边框发生变化

---

非常感谢你的帮助

最好不要像这样使用内联css，这意味着最好使用：

<style type="text/css">
img.size-medium{border: 5px solid #696262; padding: 5px; margin: 0px;}
img.size-medium:hover{border: 12px solid blue;}
</style>

---

是的，非常好。谢谢。Django，我可以混合和匹配我的旧CSS和内联CSS而不会出现任何问题吗？为什么我要用！重要吗？代码似乎不起作用。你介意告诉我如何实施吗？

img.size-medium:hover{border: 12px solid blue !important;}