0

我正在设计一个具有图像的网站，当将鼠标悬停在淡入淡出时会出现文本。

我已经使用下面的线程来做到这一点，一切都很顺利，但是当我添加的文本达到图像的完整宽度和高度时，它会遍历。我试图通过我的 CSS 为文本添加填充，但它不起作用。

悬停时在图像上带有文本的 DIV

这是我修改后的代码，已修改

CSS

    p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}


   div.containerdiv{position:relative}

div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}

div.texts:hover{display:block}

html

    <div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
    <img src="images/cncpt.jpg" alt="background">
    <div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
  <!-- end .grid_8 -->

还是不开心！它显示图像很好，但没有文字显示在它上面或页面上的任何地方！

任何有关如何解决此问题的想法将不胜感激。

谢谢，约翰

4

1 回答 1

0

使用 CSS 的一个简单答案是在锚标记上使用 :hover 伪类。

在 CSS 中将图像容器设置为 position:relative。

创建一个包含文本的 div，在图像容器内使用 html 和 CSS 进行格式化。在 CSS 中定位这个绝对值。绝对定位相对于相对定位的父容器定位元素。如果没有元素设置为相对位置，它将从 body 标签中获取其位置。为元素设置宽度也很重要。

HTML

<div class="container">
    <a><img src="img.jpg" alt="background">
       <div class="text">I will show on hover</div>
    </a>
</div>

CSS

div.container{position:relative;}

div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}

a:hover div.text{display:block;}

这会将文本定位在您设置为相对对齐到左上角的容器上。z-index 将元素一层一层地堆叠起来。z-index 越高，元素在堆栈中的位置就越高。

w3 学校对上面的所有代码都有一些很好的定义和示例，如果它对您来说是新的。

只用html和css就可以达到你想要的效果。我建议你专注于：

  1. 在纸上设计您的网站
  2. 使用 html 和 CSS 布局您的页面
  3. 添加你的翻转效果和 jQuery 动画

在添加 jQuery 动画之前

CSS3 过渡并非与所有浏览器兼容，尽管经常使用 jQuery 后备，但 CSS 中有一些变通方法。

于 2013-08-06T21:38:05.980 回答