[英]Change text color on mouseover caption
我正在尝试建立一个页面,其中连续有多个标题,下面是描述性段落。 当用户在标题上滚动时,段落将根据他们悬停的标题进行更改。 我希望每个标题使用不同的颜色,并且段落的字体颜色应更改为与标题的颜色匹配。 我遇到的问题是更改段落的颜色。
这是我的示例:
<script type="text/javascript">
function onover(caption)
{document.getElementById('text').innerHTML=caption;}
{document.getElementById('text2').innerHTML=caption;}
</script>
<a onmouseover="onover('Paragraph 1')" style="color:green">Title 1</a>
<a onmouseover="onover('Paragraph 2')" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<div id="text2" style="color:red"></div>
更新由于OP希望替换文本,
<script type="text/javascript">
function onover(caption,color) {
document.getElementById('text').innerHTML=caption;
document.getElementById('text').style.color=color;
document.getElementById('text2').style.color=color;
}
</script>
<a onmouseover="onover('Paragraph 1','green')" style="color:green" id='one'>Title 1</a>
<a onmouseover="onover('Paragraph 2','red')" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<script type="text/javascript">
function onover(caption, objId, obj)
{
document.getElementById(objId).innerHTML=caption;
document.getElementById(objId).style.color = obj.style.color;
}
</script>
<a onmouseover="onover('Paragraph 1', 'text', this)" style="color:green">Title 1</a>
<a onmouseover="onover('Paragraph 2', 'text2', this)" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<div id="text2" style="color:red"></div>
document.getElementById('text2').style.color = 'blue';
会改变文本的颜色。
在单独的注释上, {document.getElementById('text2').innerHTML=caption;}
不是onover函数的一部分。
我强烈建议您将样式,逻辑和内容分开。 它使您的代码更易于阅读和维护。 一些建议:
这是如何实施这些建议的示例:
<style>
.red { color: red; }
.green { color: green; }
</style>
<div id="TitleBar">
<a data-text="Paragraph 1" class="green">Title 1</a>
<a data-text="Paragraph 2" class="red">Title 2</a>
</div>
<div id="text"></div>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$('#TitleBar').on('hover', 'a', function (e) {
var $evTarg = $(e.target),
$dest = $('#text');
$dest.html($evTarg.data('text')).attr('class', $evTarg.attr('class'));
});
</script>
**最后一个注释-如果“ Paragraph x”文本超过几个单词,请考虑将文本存储在命名数组中,而不是将其嵌入到源标签中。
您最好通过CSS做到这一点。 完全不需要编程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.