Показать ссылку на изображение при зависании в jquery

Я использую Bootstrap 3 и jQuery 1.9.1 чтобы создать сайт, на котором изображение профиля отображается в

  • . Я хочу показать ссылку «Обновить изображение», когда я курю над изображением. Пока мне удалось угаснуть изображение при наведении курсора, но я не могу показать ссылку или текст, зависающие над изображением. Вот мои коды,

    Jquery

     $(function () { $(".img-profile").hover( function () { $(this).fadeTo(200, 0.45); }, function () { $(this).fadeTo(200, 1); }); }); 

    CSS

     .img-profile { margin-top: 10px; width: 200px; height: 250px; } 

    HTML

      

    Я искал другие источники, но ни один из них не работает, так как это приведет к ошибкам моих собственных стилей CSS. Как я могу показать ссылку в середине изображения при наведении курсора? Нужна эта помощь плохо! Благодарю.

    Надеюсь, если вы хотите сделать это без JQuery – даже если вы хотите управлять им с помощью jquery, это также может быть сделано .. Не большая проблема

     .img-profile { margin-top: 10px; width: 200px; /* if image is bigger it will adjust according to parent width */ height: 250px; display: inline-block; } .img-wrap { display: inline-block; position: relative; } .img-wrap:hover .img-profile { opacity: 0.5; } .img-wrap .hover-div { display: none; position: absolute; text-align: center; top: 50%; left: 0; right: 0; margin-top: -10px; z-index: 10; /* width of image container */ } .img-wrap:hover .hover-div { display: inline-block; } 
        
  • Yoy должен попробовать это. это именно то, что вы хотите.

     $(function () { $(".img-profile").hover( function () { $(this).fadeTo(200, 0.45); $(this).closest("li").find("a").show(); }, function () { $(this).fadeTo(200, 1); $(this).closest("li").find("a").hide(); }); }) 
     .img-profile { margin-top: 10px; width: 200px; height: 250px; } 
       

    вы можете достичь всего этого, используя только css.

    HTML

      

    CSS

     .img-profile { margin-top: 10px; width: 200px; height: 250px; opacity: 1.0; filter:alpha(opacity=100); } .text { display: none; } img-profile:hover { opacity: 0.45; filter:alpha(opacity=45); } img-profile:hover + .text { display: block; } 

    проверить эту скрипку

    HTML

      

    CSS

     .img-profile { margin-top: 10px; width: 200px; height: 250px; } #side-menu li a{ display:none; } #side-menu li:hover a#update{ display:block; } 

    JS

     $(function () { $(".img-profile").hover( function () { $(this).fadeTo(200, 0.45); }, function () { $(this).fadeTo(200, 1); }); });