要创建一个具有鼠标悬停时显示更多信息的元素，需要使用HTML和CSS的技术实现。具体步骤如下：
在HTML中创建元素，可以是一个链接、图片等等。
使用CSS添加样式，使元素在鼠标悬停时显示更多信息。
添加HTML属性，使元素与CSS样式相对应。
下面是一个示例代码：
<a href="#" class="hover-element" data-tooltip="更多信息">鼠标悬停显示更多信息</a>.hover-element {
position: relative;
}
.hover-element:before {
content: attr(data-tooltip);
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
}
.hover-element:hover:before {
display: block;
}在上面的代码中，首先使用HTML创建一个链接元素，并添加了一个class和data-tooltip属性。
在CSS中，我们将链接元素的position属性设置为relative，并在其伪元素:before中添加了要显示的信息。我们使用display:none属性将其隐藏起来，并在:hover状态下将其显示出来。
最后，我们将:before元素的位置设置为链接元素底部的中心位置，并使用transform:translateX(-50%)属性将其居中对齐。我们还添加了一些样式，如背景颜色、字体大小和圆角等。
通过这种方式，我们可以创建一个具有鼠标悬停时显示更多信息的元素。