火狐大纲周围的盒子阴影悬停 [英] Firefox outline around box-shadow on hover

问题描述

这是我对StackOverflow的第一个问题，所以我会尝试以正确的方式格式化。

基本上，我有一个边框和轮廓的div 。在悬停时，div也得到一个阴影，当然，它应该在轮廓之外。
这在所有浏览器都很好，除了firefox。 Firefox似乎出于某种原因将大纲渲染到box-shadow外面。
例子如下： http://rubencoolen.be/test.php

这是我的CSS：

  .block {
 
 background：#eceeeb; 
 border：3px solid white; 
 outline：2px薰衣草; 
 width：240px; 
 padding：10px; 
 float：left; 
 height：130px; 
 margin：40px; 
 text-align：center; 
 cursor：default; 
 -moz-transition：background 0.7s，-moz-box-shadow 0.3s; 
 -webkit-transition：background 0.7s，-webkit-box-shadow 0.3s; 
 -o-transition：background 0.7s; 
 transition：background 0.7s，box-shadow 0.3s; 
 
} 
 
 .block：hover {
 
 background：whitesmoke; 
 -webkit-box-shadow：0px 0px 18px rgba（50，50，50，0.30）; 
 -moz-box-shadow：0px 0px 18px rgba（50，50，50，0.30）; 
 box-shadow：0px 0px 18px rgba（50，50，50，0.30）; 
 
} 
  

我似乎找不到正确的解决方法这个问题。

请原谅我适度的英语，这不是我的主要语言。

解决方案

您可以嵌套 div s，以获得与大纲相同的效果：

 < div class ='outline'> 
< div class =block> Test< / div> 
< / div> 
  

然后添加更改css：

  .block {
 position：absolute; 
 top：0px; 
 left：0px; 
 background：#eceeeb; 
 border：3px solid white; 
 width：234px; 
 padding：10px; 
 float：left; 
 height：124px; 
 text-align：center; 
 cursor：default; 
 -moz-transition：background 0.7s，-moz-box-shadow 0.3s; 
 -webkit-transition：background 0.7s，-webkit-box-shadow 0.3s; 
 -o-transition：background 0.7s; 
 transition：background 0.7s，box-shadow 0.3s; 
} 
 
 .outline {
 position：relative; 
 border：2px薰衣草
 width：240px; 
 padding：10px; 
 float：left; 
 height：130px 
 margin：40px; 
} 
  

这适用于Chrome和Firefox的最新版本

This is my first question on StackOverflow, so I'll try to format it the right way.

Basically, I have a div with a border and an outline. On hover, the div also gets a shadow, which, of course, should be outside of the outline. This goes well in all browsers, except for firefox. Firefox seems to render the outline outside of the box-shadow for some reason. An example can be seen here: http://rubencoolen.be/test.php

This is my CSS:

.block {

    background: #eceeeb;
    border: 3px solid white;
    outline: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;

}

.block:hover {

    background: whitesmoke;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    -moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);

}

I can't seem to find the right way of tackling this issue.

Please excuse my moderate English, it's not my main language.

解决方案

You can just nest divs to give the same effect as an outline:

<div class='outline'>
    <div class="block">Test</div>
</div>

And then add change the css:

.block {
    position:absolute;
    top:0px;
    left:0px;
    background: #eceeeb;
    border: 3px solid white;
    width: 234px;
    padding: 10px;
    float: left;
    height: 124px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;
}

.outline {
    position:relative;
    border: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
}

This works in both latest versions of Chrome and Firefox

这篇关于火狐大纲周围的盒子阴影悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！