Problem with hover

Problem with hover

Hi again,

I have a problem with hover and click, My intention is that if the mouse is over a header, then the header should be underlined and bold, and if the header is clicked, the header should stay underlined and bold, but only the clicked header,
if another header is clicked than the other headers should be not underlined and bold but the clicked header should be underlined and bold.

Does anyone know how I can do this?

Thanks a lot,
All the best,


  1. <div id="latestNews">
                    <div id="latestNewsHeader">Letzte Neuigkeiten</div> <br />
                    <div class="latestNewsShortcut">Header</div>
                    <p class="latestNewsText" style="display: none">text...</p>
                    <br />
                    <div class="latestNewsShortcut">header</div>
                    <p class="latestNewsText" style="display: none">text</p>
                    <br />
                    <div class="latestNewsShortcut">weiterer Header</div>
                    <p class="latestNewsText" style="display: none">text</p>
                    <br />
                </div>

                <script>
                    $(".latestNewsShortcut").hover(
                        function () {
                            $(this).css({fontWeight:"bold"});
                            $(this).css("text-decoration", "underline");},
                        function() {
                            if(!$(".latestNewsText").is(":visible")) {
                                $(this).css({fontWeight:"normal"});
                                $(this).css("text-decoration", "none");
                                }
                            }
                        );
                    $(".latestNewsShortcut").click(function () {
                        $(".latestNewsText").hide("fast");
                        var newsText = $(this).next(".latestNewsText");
                        $(".latestNewsShortcut").css({fontWeight:"normal"});
                        $(".latestNewsShortcut").css("text-decoration", "none");
                        if(newsText.is(":visible")) {
                            newsText.hide("fast");
                            }
                        else {
                            $(this).next(".latestNewsShortcut").css({fontWeight:"bold"});
                            $(this).next(".latestNewsShortcut").css("text-decoration", "underline");
                            newsText.show("fast");
                            }
                        });
                </script>