CSS中，div元素是很常见的一种容器元素，它可以用来包含其他元素并作为一个整体进行样式设计。如果想让鼠标悬停在div上时出现颜色，可以使用:hover伪类选择器。

div:hover {
  background-color: yellow;
}

上述代码的意思是在div元素上鼠标悬停时，背景颜色会变成黄色。其中:hover是伪类选择器，表示当鼠标悬停在div上时，样式将生效。background-color属性用于设置背景颜色，这里设置为黄色。

除了使用单一的背景颜色，还可以使用渐变效果。以下是一个例子：

div:hover {
  background-image: linear-gradient(to bottom, #ffcc00, #ff9900);
}

这段代码的作用是，在鼠标悬停在div上时，背景颜色会变成从#ffcc00到#ff9900的梯度渐变效果。其中linear-gradient是CSS的一个渐变函数，用于生成线性渐变效果。to bottom表示从上到下渐变，#ffcc00和#ff9900是起始和结束颜色。

如果希望鼠标悬停时不仅div颜色变化，而且里面的文字也有变化，可以同时设置div和内部文字的样式，如下所示：

div:hover {
  background-color: yellow;
}

div:hover p {
  color: red;
}

上述代码的意思是，在鼠标悬停在div上时，div的背景颜色变成黄色，div里面的p元素文字颜色变成红色。后面的div:hover p表示当div元素上的鼠标悬停时，里面的p元素将会变化。

通过设置:hover伪类选择器，可以轻松实现鼠标悬停时的颜色变化效果，为网页增加一点互动性和美观性。