14
What you could do is cheat a little bit by setting width and height to 0 to hide the actual image and apply some CSS to do what you want:
你所能做的就是把宽度和高度设为0来隐藏真实的图像并应用一些CSS来做你想做的事情:
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
And the padding making the img tag the size you want it to have (half the size of your actual image).
以及使img标记具有您希望的大小的填充(实际图像大小的一半)。
Fiddle
小提琴
12
I had a similar problem but my solution was to have two images, one hidden (display:none) and one visible. On the hover over a surrounding span, the original image changes to display:none and the other image to display:block. (Might use 'inline' instead depending on your circumstances)
我也遇到过类似的问题，但我的解决方案是有两个图像，一个是隐藏的(显示:没有)，一个是可见的。在鼠标悬停在周围的空间上，原始的图像改变显示:没有和其他图像显示:块。(可能会使用'inline'，这取决于您的环境)
This example uses two span tags instead of images so you can see the result when running it here. I didn't have any online image sources to use unfortunately.
这个例子使用了两个span标签而不是图像，所以在这里运行时可以看到结果。不幸的是，我没有任何在线图片来源可以使用。
#onhover {
display: none;
}
#surround:hover span[id="initial"] {
display: none;
}
#surround:hover span[id="onhover"] {
display: block;
}
original
replacement
3
Since you can't change the src with CSS: If jQuery is an option for you, check this fiddle.
由于不能使用CSS更改src:如果jQuery是您的选项，请检查这个小提琴。
$('#aks').hover(
function(){
$(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
},
function(){
$(this).attr('src','http://dummyimage.com/100x100/000/fff')
}
)
It's basically using the .hover() method... it takes two functions to make it work. When you enter the hover and when you exit it.
它基本上是使用。hover()方法…它需要两个函数才能工作。当你进入鼠标悬停和退出鼠标时。
We are using the .attr (short for attribute) to change the src attribute.
我们使用.attr(属性的缩写)来更改src属性。
It's worth to note that you need the jQuery library included like in the fiddle to make this work.
值得注意的是，您需要jQuery库，比如fiddle。
3
I have one more solution. If anybody uses AngularJs : http://jsfiddle.net/ec9gn/30/
我还有一个解。如果有人使用AngularJs: http://jsfiddle.net/ec9gn/30/
![]()
there is a way to change image url on mouse over by using jQuery functionality as below:
同意AshisKumar的回答，有一种方法可以通过使用jQuery功能来更改鼠标上的图像url，如下所示:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
$(this).attr("src", url1); //URL @the time of mouse over on image
})
.mouseout(function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", url2); //default URL
});
});
2
I had similar problem - I want to replace picture on :hover but can't use BACKGRUND-IMAGE due to lack of Bootstrap's adaptive design.
我也遇到过类似的问题——我想要替换图片:悬停，但是由于缺少Bootstrap的自适应设计，所以不能使用backgrund图像。
If you like me only want to change the picture on :hover (but not insist of change SRC for the certain image tag) you can do something like this - it's CSS-only solution.
如果您喜欢我，只希望在:hover(但不坚持为特定的图像标记更改SRC)上更改图片，您可以这样做——这是仅针对css的解决方案。
HTML:
HTML:
CSS:
CSS:
li { position: relative; overflow: hidden; }
li img.hoverPhoto {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
opacity: 0;
-web-kit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;li
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }
If you want IE7-compatible code you may hide/show :HOVER image by positioning not by opacity.
如果你想要ie7兼容的代码，你可以隐藏/显示:悬停图像通过定位而不是不透明。
2
Personally, I would go with one of the Javascript / jQuery solutions. Not only does this keep your HTML semantic (i.e., an image is shown as an img element with it's usual src image defined in the markup), but if you use a JS / jQuery solution then you will also be able to use the JS / jQuery to preload your hover image.
就我个人而言，我将使用一个Javascript / jQuery解决方案。这不仅保持了HTML的语义(例如。，将图像显示为img元素，并在标记中定义通常的src图像)，但是如果使用JS / jQuery解决方案，那么还可以使用JS / jQuery预加载悬浮图像。
Preloading the hover image will mean there is likely to be no download delay when the user hovers over the original image, resulting in your site behaving much more professionally.
预加载悬停图像将意味着当用户悬停在原始图像上时，很可能不会出现下载延迟，从而使您的站点表现得更加专业。
It does mean you have a dependency on JS, but the tiny minority that don't have JS enabled are probably not going to be too fussed - and everyone else will get a better experience... and your code will be good, too!
这确实意味着您依赖于JS，但少数没有启用JS的人可能不会太过挑剔——其他人将获得更好的体验……你的代码也会很好!
1
You can't change img tag's src attribute using CSS. Possible using Javascript onmouseover() event handler.
您不能使用CSS更改img标签的src属性。可以使用Javascript onmouseover()事件处理程序。
HTML:
HTML:
0
Heres a pure CSS solution. Put the visible image in the img tag, put the second image as a background in the css, then hide the image on hover.
这是一个纯粹的CSS解决方案。将可见图像放入img标签中，将第二个图像作为css中的背景，然后将图像隐藏在悬停状态。
.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but4 a:hover img{
visibility:hidden;
}
0
The best way to change src for image is:
改变src图像的最好方法是:
See live demo: http://www.audenaerde.org/csstricks.html#imagereplacecss
看到现场演示:http://www.audenaerde.org/csstricks.html imagereplacecss
Enjoy!
享受吧!
0
Try This Code.
试试这个代码。
.card {
width: 200px;
height: 195px;
position: relative;
display: inline-block;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
width:200px;
}
.card:hover .img-top {
display: inline;
}
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 