鼠标悬停，css div效果，alpha和新按钮

-2

我有div 200 * 200像素。我需要的效果： - 当DIV用户鼠标悬停：阿尔法70％的黑画面 - 图画（或文字链接）例如中显示新按钮“添加到购物车”

你可以在这里看到我的例子： http://jsfiddle.net/t8jPN

<div class="wrapper"> 
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div> 
<img src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"></img> 
</div> 

.wrapper { 
margin: 50px auto; 
width: 200px; 
height: 200px; 
background: white; 
border-radius: 2px; 
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
box-shadow:   0px 0px 8px rgba(0,0,0,0.3); 
position: relative; 
z-index: 90; 
} 

.ribbon-wrapper-green { 
width: 85px; 
height: 88px; 
overflow: hidden; 
position: absolute; 
top: -3px; 
right: -3px; 
} 

.ribbon-green { 
font: bold 15px Sans-Serif; 
color: #ffffff; 
text-align: center; 

-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform:  rotate(45deg); 
-o-transform:  rotate(45deg); 
position: relative; 
padding: 7px 0; 
left: -5px; 
top: 15px; 
width: 120px; 
background-color: #BFDC7A; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
background-image:  -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
background-image:  -o-linear-gradient(top, #BFDC7A, #8EBF45); 
color: #6a6340; 
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); 
box-shadow:   0px 0px 3px rgba(0,0,0,0.3); 
} 

.ribbon-green:before, .ribbon-green:after { 
content: ""; 
border-top: 3px solid #6e8900; 
border-left: 3px solid transparent; 
border-right: 3px solid transparent; 
position:absolute; 
bottom: -3px; 
} 

.ribbon-green:before { 
left: 0; 
} 
.ribbon-green:after { 
right: 0; 
}

感谢

来源

2013-06-18 ante1820

后你有请 – chepe263

我的编辑职位和粘贴代码的代码。 – ante1820

的基本思路是有包装三个div的。一格与图像，一格与阴影和其他按钮。

影子和按钮（或链接）存在单独的div的原因是为了避免按钮上的透明效果。

我想有更好的方法来解决这个问题，但我会使用这个，因为我觉得它更容易。

演示http://jsfiddle.net/chepe263/a97FS/10/

<html> 
    <head> 
     <style type="text/css"> 
      .contenedor{ 
       position:relative; 
       width: 200px; 
       height: 200px; 
       border: 1px solid black; 

      } 
      .atCorner{ 
       position: absolute; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: 100%; 

      } 
      .escondido{ 
       display: none;  
      } 
      .shadow{ 
       background-color: black; 
       zoom: 1; 
       filter: alpha(opacity=70); 
       opacity: 0.7; 

      } 
      .button{ 
       text-align: center;  
      } 
      .button button{ 
       margin-top: 40%; 

      } 
     </style> 
     <script type="text/javascript"> 
      $('.contenedor').mouseenter(function(){ 
       jQuery(this).find('.shadow, .button').fadeIn(); 
      }).mouseleave(function(){ 
       jQuery(this).find('.shadow, .button').fadeOut(); 
      }); 
     </script> 
    </head> 
    <body> 
     <div class="contenedor"> 
      <div class="atCorner" id="picture"> 
       <img src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg" /> 
      </div> 
      <div class="atCorner escondido shadow" id=""> 
      </div>  
      <div class="atCorner escondido button" id="">  
       <button>Buy it</button> 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-06-20 18:52:16 chepe263

鼠标悬停，css div效果，alpha和新按钮

回答

相关问题