找到你要的答案

Q:Set hover effect on the img inside a div

Q:设置悬停在div img效果

I have a html in this fashion

<div class="image_area">
   <a href="<?php echo base_url();?>product-detail?product=<?php echo $pl['product_slug'];?>">
     <img src="<?php echo base_url().$pl['product_image'];?>" 
                                style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>
   </a>
</div>

I want a hover effect on the image such that the border gets highlighted.

I have used this css code, but nothing happens

Please help me.

.image_area img :hover{ border: 1px solid #b6e2ff}

我有这样一个HTML

<div class="image_area">
   <a href="<?php echo base_url();?>product-detail?product=<?php echo $pl['product_slug'];?>">
     <img src="<?php echo base_url().$pl['product_image'];?>" 
                                style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>
   </a>
</div>

我想要一个悬停效果的图像,使边界得到突出显示。

我已经使用这个CSS代码,但是什么都没发生

请帮助我。

.image_area img :hover{ border: 1px solid #b6e2ff}
answer1: 回答1:
.image_area img:hover{ border: 1px solid #b6e2ff}

No space after img

And to avoid jump of image when hovered, do :

.image_area img{ border:1px solid transparent}

or you can even better do

.image_area a:hover img{ border: 1px solid #b6e2ff}

EDIT thanks to nevermind I didn't see this:

style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>

remove border:1px solid #cfcfcf from there, and put it in .image_area img{ border:1px solid transparent} or .image_area a img{ border:1px solid transparent}

.image_area img:hover{ border: 1px solid #b6e2ff}

在IMG没有空间

为了避免图像时,在做跳:

.image_area img{ border:1px solid transparent}

或者你甚至可以做的更好

.image_area a:hover img{ border: 1px solid #b6e2ff}

EDIT thanks to nevermind I didn't see this:

style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>

remove border:1px solid #cfcfcf from there, and put it in .image_area img{ border:1px solid transparent} or .image_area a img{ border:1px solid transparent}

answer2: 回答2:

No space between img and :hover
You can use

.image_area > a img:hover{border:1px solid #b6e2ff;}

No space between img and :hover
You can use

.image_area > a img:hover{border:1px solid #b6e2ff;}
answer3: 回答3:

two notes: 1. do not use style in your html code, add a new class with the following css:

width:196px;
min-height:250px; 
max-height:250px; 
border:1px solid #cfcfcf;
  1. you missed the ";" tag in the end of your line. try use this code:

    .image_area img:hover { border: 1px solid #b6e2ff; }
    

two notes: 1. do not use style in your html code, add a new class with the following css:

width:196px;
min-height:250px; 
max-height:250px; 
border:1px solid #cfcfcf;
  1. 你错过了“的”标签在您的行结束。尝试使用此代码:

    .image_area img:hover { border: 1px solid #b6e2ff; }
    
html  css