Javascript 单击后保持稳定的淡入悬停

我正在尝试做一些看似非常简单的事情，但却没有找到将我已有的代码与我想要的微小细节相匹配的方法

我有图像链接，调用充满文本的div。我需要的图像淡入完全悬停，并保持完全不透明，一旦点击，除非有人点击一个不同的图像

我为文本div淡入而编写的脚本将它们完美淡入，这就是为什么我保留我以前使用过的代码。。。但是，我愿意将其与淡入悬停结合在一起，并保留我需要整理的样式或脚本，或者完全更改JQuery脚本，以便所有内容都以正确的方式运行

这是我的图像按钮的代码

<bioimage1><a href="javascript:showDiv('biotext1')" class="fade"><img src="update_feb_2014/bio_images/1.jpg" width="115" height="115" border="0"/></a></bioimage1>

下面是控制文本div淡入的JQuery/Javascript：

$(document).ready(function() {
        var option = 'biotext2';
        var url = window.location.href;
        option = url.match(/option=(.*)/)[1];
        showDiv(option);
});
    function showDiv(option) {
        $('.hidden').fadeOut(700);   
        $('#' + option).fadeIn(700);
        $('#biotextmain').fadeOut(700);   
    }

    $(function(){ 
        $('#' + option).fadeIn(700);
        });

这是淡入的15个文本div之一的示例：

<div id="biotext1" class="hidden">1 this is my bio this is my bio This is my bio</div>

1这是我的简历这是我的简历这是我的简历

---

我想这就够了。非常感谢你的帮助

我的建议是在单击时删除你的.fade类。你的行为就是这样，所以它应该做你想做的事。另外，将默认的CSS不透明度附加到该挂钩上，您将删除默认的不透明度，以便当您关闭鼠标时，图像不会返回到其开始状态。这有帮助吗？

你可以试试类似的方法

<bioimage1>
    <a data-target="biotext1" href="#" class="fade">
        <img src="update_feb_2014/bio_images/1.jpg" width="115" height="115" border="0"/>
    </a>
</bioimage1>

<div id="biotext1" class="hidden">
    1 this is my bio this is my bio This is my bio
</div>

及

---

演示：

不应

showDiv（）

和

$（“#”+选项）在
文档中。准备好了（）{..}
函数吗？请创建您我亲爱的先生，您太棒了！它工作得很好！现在是凌晨2点20分，由于这项成就，我终于可以睡觉了。这让我快发疯了！非常感谢你！你介意解释一下，如果我决定走那条路线，如何让div在hover而不是click上被调用吗？我试着用“hover”替换“click”，但它有问题，希望在调用当前div的同时淡入淡出激活的最后一个div。如果这是一个复杂的解决方案，不要担心。我只是想也许我错过了一个简单的改变。@Naomi抱歉。。。你所说的“悬停”而不是“单击”是什么意思…你已经对悬停事件产生了影响。。。。悬停时你想做什么？
<bioimage1>
    <a data-target="biotext1" href="#" class="fade">
        <img src="update_feb_2014/bio_images/1.jpg" width="115" height="115" border="0"/>
    </a>
</bioimage1>

<div id="biotext1" class="hidden">
    1 this is my bio this is my bio This is my bio
</div>

$(document).ready(function () {
    var $hiddens = $('.hidden');
    var option = 'biotext2';
    var $fades = $('.fade').click(showDiv);

    //var url = window.location.href;
    //option = url.match(/option=(.*)/)[1];
    $fades.filter('[data-target="' + option + '"]').click();


    function showDiv() {
        var $this = $(this),
            option = $this.data('target');
        $fades.removeClass('clicked')
        $this.addClass('clicked');
        $hiddens.fadeOut(700);
        $('#' + option).fadeIn(700);
        $('#biotextmain').fadeOut(700);
    }

});

.fade {
    opacity: 0.5;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover, .fade.clicked {
    opacity: 1;
}
.hidden {
    display:none
}