-2

ここ数日 jQuery を使ってきましたが、自分の Web サイトに 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 は気にしませんが、あまり得意ではありません。

4

2 に答える 2

8

ID は一意でなければなりません。class代わりにaを使用してください。

さらに、これには jQuery を使用しないでください。

CSS:

.text:hover {color:#000}

デモ

これが jsFiddle のデモンストレーションです...フィドルで RED を使用すると、効果を簡単に確認できます。

http://jsfiddle.net/tSMFt/

于 2013-10-07T21:11:12.007 に答える
3

HTML/XMLidは、ドキュメント全体で一意である必要があります。それらは一意である必要があるため、jquery と基になるdocument.getElementById()呼び出しは、最初に一致する要素のみを返します

class代わりにa を使用する必要があります。

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

$('.makemeblack').mouseover(....);
于 2013-10-07T21:11:44.210 に答える