javascript - 如何让我的箭头文本留在 fullpage.js 上的正确位置?

标签 javascript jquery html css fullpage.js

我是新来的,我正在寻找困扰我的事情的答案。我正在为客户开发一个网站,它使用 fullpage.js .....您可以在 http://begemini.co.uk/workshop/loweclothing/index.html 查看该网站

问题是我对箭头旁边的文本有疑问。我无法让正确的文本停留在“slide1”上我尝试使用“position:fixed”,但它停留在正确的位置,但它在每张幻灯片上,我需要在每张幻灯片上使用不同的文本....

html代码是:

    <body>
<div class="section" id="section1">
    <div class="slide" id="slide1"><img src="imgs/Lowe-Clothing-logo.png" width="30%">
            <div id="left-text">Business Opportunities</div><!--left-text-->
  <div id="right-text">Introduction</div><!--right-text--></div><!--Slide1-->
    <div class="slide" id="slide2"><h1>Totally customizable</h1></div><!--Slide2-->
</div>


</body>

CSS 是:

#left-text{
    position: absolute;
    top: 50%;
    left: 60px;
    margin-top:-9px;
    font-size: 1.1em;   
    font-family: arial,helvetica;
    color: #fff;
 }

 #right-text{
    position: absolute;
    top: 50%;
    right: 60px;
    margin-top:-9px;
    font-size: 1.1em;   
    font-family: arial,helvetica;
    color: #fff;
    z-index:100;
 }

所以基本上我试图将文本放在箭头上,但要与其余内容一起过渡。我希望每一页的箭头旁边都有不同的文字。您可以下载整个网站here看看整个代码。

任何帮助将不胜感激.. 谢谢, 罗布

最佳答案

首先尝试只使用一种 css 单位,即仅像素或仅 em。

试试这个,然后使用 relative 或 absolute 并尝试它是否有效。

关于javascript - 如何让我的箭头文本留在 fullpage.js 上的正确位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21124674/

相关文章:

javascript - 有什么方法可以在 jPlayer jquery 插件中设置 15 秒倒带按钮吗?

javascript - 如何停止旧的点击事件并启动新的点击事件

html - Laravel:背景图片不会出现

jquery - 我无法更改图像幻灯片

html - 下拉菜单不完全重叠菜单选项。 Z 索引设置

javascript - Yeoman Generator - 如何解析 Generator 项目的 Package.json

.net - 编写秒表

javascript - 使用 ruby​​ on Rails 页面正确设置 CoffeeScript

jquery - AngularJS - 仅使用 jqLit​​e 模拟 .prev() ?

jquery - 如何使子菜单的图像居中于 bootstrap nav-pill