Javascript 在MouseOver上单击目标div并替换文本

您好，我需要能够滚动/单击一些项目符号，并在页面（说明）的其他位置指向一个div，替换其中的文本。有人有什么想法吗？我真的很感激任何帮助-谢谢

JS

CSS

HTML

1.
2.
3.
4.
你好

您需要一个地方来存储文本，因此使用数据属性将文本添加到元素中

<a data-description="hello, I am the first bullet" class="bullet" tabindex="-1">1</a>

---

工作示例

---

您需要一个地方来存储文本，因此使用数据属性将文本添加到元素中

<a data-description="hello, I am the first bullet" class="bullet" tabindex="-1">1</a>

---

工作示例

---

感谢您的回复，它可以工作，但目前显示的是数字，我希望在“描述”部分的图片下方有一个单独的描述，如“这是一个弹跳球”。我猜bullet类需要一个平铺还是什么？此外，我希望第一个描述出现在页面首次加载时，而不是必须点击项目符号-再次感谢！谢谢Blowsie，我现在在我的description div中没有收到任何文本？您是否向元素添加了属性？如下所示？：不，正如我的回答所解释的，谢谢您的回答，它可以工作，但当前显示了数字，我想要一个单独的描述，比如“这是一个弹跳球”，在描述部分的图片下面。我猜bullet类需要一个平铺或者什么？此外，我希望第一个描述出现在页面首次加载时，而不是必须点击项目符号-再次感谢！谢谢Blowsie，我现在在我的description div中没有收到任何文本？您是否向元素添加了属性？如下所示？：不，正如我的答案所解释的

<div id="bullet-container"><div class="numbers">
    <span onmouseover="document.rollimg.src=image1.src;">
        <a class="bullet" tabindex="-1">
            <div>1</div>
        </a>
    </span>
    <span onmouseover="document.rollimg.src=image2.src;">
        <a class="bullet" tabindex="-1">
            <div>2</div></a>
    </span>
    <span onmouseover="document.rollimg.src=image3.src;">
        <a class="bullet" tabindex="-1">
            <div>3</div>
        </a>
    </span>
    <span onmouseover="document.rollimg.src=image4.src;">
        <a class="bullet" tabindex="-1">
            <div>4</div>
        </a>
    </span>
</div>

<div class="description">hello</div>

<a data-description="hello, I am the first bullet" class="bullet" tabindex="-1">1</a>

<script type="text/javascript">
$(document).ready(function(){

  // Set up click event
  $('.bullet').click(function(){
    $('.bullet').removeClass("active");
    $(this).addClass("active");
    $('.description').text($(this).data('description'))
  });  

  // Click the first item
  $('.bullet:first').click();

});
</script>