JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<div id="linkswrapper">
    <div>
        <a>Slide 1</a>
        <p>Slide info 1.</p>
    </div>
    <div>
        <a>Slide 2</a><p>Slide info 2.</p>
    </div>
    <div>
        <a>Slide 3</a>
        <p>Slide 3 info.</p>
    </div>
</div>

JavaScript

// adds href="#" to all links in "linkswrapper" div
$("#linkswrapper div a").attr({href: "#"});

// this handles clicks on the divs. When clicked, the div is assigned 
// "clicked" id, and the id attribute is removed from the other sibling divs
$("#linkswrapper div").click(function() {
    $(this).attr({id:"clicked"});
    $("#linkswrapper div").not(this).each(function(){ $(this).removeAttr("id"); }); 
});

// handling the mouseover/mouseout. Hover should be working on all the three divs 
// if neither of them has been clicked on or only on the two other divs if one 
// of the three has been clicked on
$("#linkswrapper div:not(#clicked)").live('mouseover', function() {
    $("a", this).css("border-color","#0066FF");
    $("p", this).css("color","#0066FF");
}).live('mouseout', function(){
    $("a", this).css("border-color","#e3e3e3");
    $("p", this).css("color","#cccccc");   
});