大学编程课程网站：图片悬停文本的白色居中样式调整咨询

嘿，我来帮你搞定这个问题！你遇到的文本位置和颜色问题，其实主要是CSS样式没设置到位——JS只是负责控制文本的显示隐藏，布局和样式的事儿得交给CSS来解决。咱们一步步来调整：

第一步：确认HTML结构 #

首先确保你的HTML结构嵌套正确，图片和文本都放在同一个容器里：

<div class="image-container">
  <img src="your-image-url.jpg" alt="Course Image">
  <div class="hover-text">你的hover文本内容</div>
</div>

第二步：关键CSS样式调整 #

这是解决问题的核心！给容器和文本设置以下样式：

/* 图片容器：设置相对定位，让内部绝对定位的文本以它为基准 */
.image-container {
  position: relative;
  display: inline-block; /* 让容器大小匹配图片尺寸，也可以用block根据布局调整 */
}

/* hover文本样式 */
.hover-text {
  display: none; /* 默认隐藏，由JS控制显示 */
  position: absolute;
  /* 先把文本的左上角定位到容器中心 */
  top: 50%;
  left: 50%;
  /* 再把文本自身向左向上移动50%，实现完美居中 */
  transform: translate(-50%, -50%);
  color: white; /* 设置白色文本 */
  /* 可选优化：加个半透明背景让文本更清晰 */
  background-color: rgba(0, 0, 0, 0.7);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 16px;
}

第三步：优化JS代码（可选） #

你的JS代码可以保留，但建议补充mouseleave事件让文本隐藏；如果课程允许的话，甚至可以用CSS的:hover伪类替代JS，写法更简洁：

// 保留JS的写法
$('.image-container').on('mouseenter', function(){
  $(this).children('.hover-text').show();
}).on('mouseleave', function(){
  $(this).children('.hover-text').hide();
});

// 或者用CSS替代JS（如果允许的话）
/* .image-container:hover .hover-text {
  display: block;
} */

为什么之前文本在左上角？ #

因为你没给.image-container设置position: relative，导致绝对定位的文本div会相对于整个页面的左上角定位。加上position: relative后，文本就会以容器为基准定位，再配合transform: translate(-50%, -50%)就能完美居中啦！

内容的提问来源于stack exchange，提问作者Katy Taylor