Я использую Bootstrap 3
и jQuery 1.9.1
для создания веб-сайта, на котором изображение профиля отображается в теге <li>
. Я хочу показать ссылку «Обновить изображение», когда наведу курсор на изображение. До сих пор мне удалось исчезнуть изображение при наведении курсора, но я не могу показать ссылку или текст при наведении курсора на изображение. Вот мои коды,
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
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
</li>
</ul>
</div>
</div>
Я искал другие источники, но ни один из них не работает, так как это будет ошибка моих собственных стилей CSS. Как я могу показать ссылку в середине изображения при зависании? Очень нужна эта помощь! Спасибо.
4 ответа
Надеюсь, если вы хотите сделать это без 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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="img-wrap">
<img class="img-responsive img-rounded img-profile center-block" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="profile_pic" />
<div class="hover-div"><a href="#">Update Image</a>
</div>
</li>
</ul>
</div>
</div>
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" alt="profile_pic" />
<a href="" id="update">Update Image</a>
</li>
</ul>
</div>
</div>
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);
});
});
Вы можете достичь всего этого, используя только CSS.
Html
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
<p class="text">change profile picture</p>
</li>
</ul>
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;
}
Проверьте эту скрипку
Вы должны попробовать это. это именно то, что вы хотите.
$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="https://i.stack.imgur.com/TwJmm.gif?s=328&g=1" alt="profile_pic" /><a href="https://www.google.com" style="display:none">Link that you want</a>
</li>
</ul>
</div>
</div>
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.