如何在.mouseover上使文本变黑

时间:2013-10-07 21:09:49

标签: jquery html css

过去几天我一直在使用jQuery,并决定开始在我自己的网站上实现它!似乎出现了一个问题,我向你寻求帮助!

我的背景是灰色的,我的文字也是如此(以及其他所有内容),我喜欢它的样子;但有些人可能很难看到它。

问题:我希望我的文本段落嵌套在他们自己的<div>标签中,在.mouseover上变黑,并尝试过几件事。

以下是悬停时我想要黑色的文字的HTML:

<div id="text"><p2><b>We are Sorry Users!</b> We are making a larger update that is proving to have quite a few bugs! We are very, very sorry about this! Please bear with us, and thank you for all of your patience!</p></div>
    <hr>
<div id="text"><p2><b>About the New Update</b> This new update will take a while! It is the update for the Arcade tab. Please bear with us as we finish it! We will make many improvements on the pages, and you will (hopefully) find them a lot easier to navigate and much more convinient! Thanks again so much for your continuing support!</p></div>
<div id="text"><p2><b>How to Search</b> To search for games, go to the category of the game, the press CTRL+F! It will open a search bar up, in Chrome, it shows up in the upper right! Type your search, and it will highlight your keywords!</p></div>
<div id="text"><p2><b>Welcome to GameShank!</b> Welcome all fellow Shankers! By now you're probably wondering what this is, right? Well, I guess it's a little bit of everything. But, for now, this website is under construction constantly, and is getting new games daily! Our games are all flash-based, and do not go through third party providers of any sort, only through GameShank! The name is a bit odd, but Shank came from many different things. Shank from the first and second ones, and shanking in Call of Duty! Our website, G Shank, will allow you, our fellow shankers, to shank at your own free will!</p></div>
<div id="text"><p2><b>What is GameShank?</b> Well, GameShank not only provides free and unrestricted games everywhere, but also put all of your favorite social networking and email websites into one. You even get the perks of unlimited free game hosting where you can publish your custom work! No matter where you live! For no charge or credit card at all, you can make your free account to link all of your social networking accounts together in one spot. You can even have your emails forwarded into your inbox for GS! Shank in Call of Duty, play Shank or Shank 2, do anything you want! G Shank has it all. To add to that, G Shank is all free</p></div>
<div id="text"><p2><b>Will it Only be Games?</b> This service will provide you more than games, and that's a promise. Not only will we provide you with <i><b>games</b></i>, but also with <i><b>movie and game news</b></i>, <i><b>videos</b></i>, <i><b>reviews</b></i>, and so much <i><b>more</i></b>! Questions? Email us at <a href="mailto:support@gameshank.com? subject=Contact%20Email">support@gameshank.com</a>!</p></div>
<div id="text"><p2><b>Your Source of Games!</b> Our games are not only available to play to our shankers, but also fully and freely downloadable with no charge! That means, if you like what you're playing, you can just download it! To download, go to our <a href="/arcade">Arcade tab!</a></p></div>
<div id="text"><p2><b>Extra Stuff!</b> Want to see a few more things we plan on? Well <a href="tobeadded.html">see them here</a>! Want to make your browser toolbox invisible until you finish your game? <a href="/howtofullscreen.html" target="_blank">Find out how to here</a>!</div>

我希望每个单独的<div id="text">仅突出显示该div的亮点。

这是我尝试过的jQuery:

<script>
    $(document).ready(function(){
        $("#text").mouseover(function(){
            $(this).css("color","#000000");
        });
    });
</script>

如果有人在.mouseout脚本中包含任何想法和想法,我们将不胜感激;我并不是要继续要求,但请尽量保持代码为jQuery。我不介意JavaScript,但我对它不是很好!

2 个答案:

答案 0 :(得分:8)

ID必须是唯一的。请改用class

此外,请不要使用jQuery。

CSS:

.text:hover {color:#000}

<强>样本

这是一个jsFiddle来演示...... 在小提琴中使用RED可以更容易地看到效果。

http://jsfiddle.net/tSMFt/

答案 1 :(得分:3)

HTML / XML id必须在整个文档中都是唯一的。由于它们必须是唯一的,因此jquery和基础document.getElementById()调用只会返回 FIRST 匹配元素。

您应该使用class代替:

<div class="makemeblack">...</div>
<div class="makemeblack">...</div>

$('.makemeblack').mouseover(....);