- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在处理的站点上有一个部分在容器中包含图像。我需要为图像添加一个悬停状态,在图像上方的容器内显示一个带有细边框的白色方 block (下面的屏幕截图)。我遇到麻烦的原因是因为我已经在图像上有一个框阴影。我尝试将一个添加到图像周围的其他元素中,但没有成功。如果有人能帮忙,那就太好了!
它的样子:
悬停时的预期效果:
HTML:
.opinion .atable .acell {
display: table-cell;
height: 100%;
width: 25%;
overflow: hidden;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #ccc;
background-color: #fff;
outline: none;
vertical-align: top;
}
.opinion .atable .acell:hover {
-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
}
.opinion .atable .acell .contentbox {
position: relative;
}
.slideImg {
display: none;
}
.opinion .atable .acell .contentbox ul {
list-style-type: none;
}
.opinion .atable .acell .contentbox ul li a {
color: white;
display: block;
height: 200px;
max-width: 100%;
width: 100%;
background-size: cover;
background-position: center;
box-shadow: 0px 0px 0px 100px rgba(131, 141, 142, 0.7) inset;
}
.opinion .atable .acell .contentbox ul li a span {
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px 10px 20px 10px;
color: #fff;
z-index: 10;
display: inline-block;
font-size: 1.3em;
text-shadow: 1px 1px 1px #000;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
}
.opinion .atable .acell .contentbox ul li a:after {
content: "";
position: absolute;
top: 0;
left: 0;
box-shadow: inset 0 0 0 350px blue;
width: 100%;
height: auto;
}
<div class="opinion">
<div class="atable">
<div class="acell">
<div class="contentbox">
<ul class="slides">
<li>
<a href="www.google.com" title="Permalink to Broadway Project" style="box-shadow: rgba(131, 140, 142, 0.701961) 0px 0px 0px 100px inset; background-image: url('http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg');">
<img src="http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg" class="slideImg wp-post-image" alt="broadwayproject2"><span>Broadway Project</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
最佳答案
我猜这就是您想要的?
我已经把我的 CSS 放在你的上面了,不需要在元素中再次复制你的。顺便说一下,你的 CSS 有一个错误(-moz-border-radius-topleft
应该是 -moz-border-top-left-radius
)
div.opinion .atable .acell .contentbox ul {
padding: 0;
min-width: 40px;
widows: 100%;
margin: 0;
}
ul.slides:hover:after {
display: block;
width: calc(100% - 20px);
height: calc(100% - 20px);
left: 9px;
top: 9px;
position: absolute;
border: 1px solid white;
content: ' ';
}
.opinion .atable .acell .contentbox ul.slides a>span {
display: none;
}
.opinion .atable .acell .contentbox ul.slides:hover a>span {
position: absolute;
bottom: 0px;
left: 0px;
padding: 20px;
color: #fff;
z-index: 10;
display: inline-block;
}
/* code under this line is already in the project, you don't need it */
.opinion .atable .acell {
display: table-cell;
height: 100%;
width: 25%;
overflow: hidden;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #ccc;
background-color: #fff;
outline: none;
vertical-align: top;
}
.opinion .atable .acell:hover {
-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.25);
}
.opinion .atable .acell .contentbox {
position: relative;
}
.slideImg {
display: none;
}
.opinion .atable .acell .contentbox ul {
list-style-type: none;
}
.opinion .atable .acell .contentbox ul li a {
color: white;
display: block;
height: 200px;
max-width: 100%;
width: 100%;
background-size: cover;
background-position: center;
box-shadow: 0px 0px 0px 100px rgba(131, 141, 142, 0.7) inset;
}
.opinion .atable .acell .contentbox ul li a span {
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px 10px 20px 10px;
color: #fff;
z-index: 10;
display: inline-block;
font-size: 1.3em;
text-shadow: 1px 1px 1px #000;
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
border-top-left-radius: 4px;
}
.opinion .atable .acell .contentbox ul li a:after {
content: "";
position: absolute;
top: 0;
left: 0;
box-shadow: inset 0 0 0 350px blue;
width: 100%;
height: auto;
}
<div class="opinion">
<div class="atable">
<div class="acell">
<div class="contentbox">
<ul class="slides">
<li>
<a href="www.google.com" title="Permalink to Broadway Project" style="box-shadow: rgba(131, 140, 142, 0.701961) 0px 0px 0px 100px inset; background-image: url('http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg');">
<img src="http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg" class="slideImg wp-post-image" alt="broadwayproject2"><span>Broadway Project</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
关于javascript - 无法获得所需的悬停状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34188678/
我正在为我的雇主编写脚本,以从他们自己的站点获取某些数据。出于一长串原因,我需要从网站上获取数据,如图所示。我发现,其中一些数据是通过 js 调用检索的... 回想起来,我应该选择 Mechanize
我正在使用 python 和 cryptography.io 来签署和验证消息。我可以通过以下方式获得签名的 DER 编码字节表示: cryptography_priv_key.sign(messag
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
是否可以区分 ECDF?以下面得到的为例。 set.seed(1) a <- sort(rnorm(100)) b <- ecdf(a) plot(b) 我想对 b 求导以获得它的概率密度函数 (PD
我找到了如何从 navigator.mimeTypes 获取 mimetypes: function GetMimeTypes() { var message = ""; var mi
我在表单中使用单选按钮来隐藏/显示联系人表单中的成员 ID 字段。问题是,当 javascript 更改 html 中包含的隐藏 id 字段(该字段设置为“无”值)时,该字段将不再通过 post 可用
我正在做单元测试。我必须测试所有可能的if..else情况。但是在此if语句中: int32_t i32Res = snprintf(buffer, len, "The%d_String_%d", 0
我有一个 Facebook 应用程序,我想从中获取“喜欢”的总数。我想知道这是否可能。 其中 ID 是应用程序的 ID,ACCESS_TOKEN 是我尝试过的应用程序的当前访问 token : gra
如果我有多个计算实例尝试同时获取同一个 blob 的租约,则似乎经常会成功。我的印象是,一旦租约发出(并因此被客户获得),就不可能同时发出另一个租约? 我希望情况确实如此,我一直在 Azure 中使用
这是我的索引 POST /blogs/1 { "name" : "learn java", "popularity" : 100 } POST /blogs/2 { "name" : "l
我正在将 Symfony2 与 FOSUserBundle 一起使用。我需要为用户获得最高角色。 role_hierarchy: ROLE_CONTRIBUTOR: ROLE_USER
我正在向服务器发送基于 REST 的请求。我希望尽快得到答复,并希望了解可以进行的各种优化。 一种方法当然是在线程中并行发送这些请求。还有哪些其他选项可用于优化此功能? 在服务器上,可以添加哪些配置?
这可能是某种重复的问题,但我似乎找不到合适的解决方案。我正在使用 git4idea.history.GitHistoryUtils.history() 获取提交列表。如果 checkout 其中一个较
我正在做一个程序,可以输入每周的工资和那一周的总工作时间。它应该以小时工资率显示答案。但是我无法显示正确的“centavos/2 decimal places”公式并且它不想使用 float % fl
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我已经尝试了 mContext.getMainLooper() 和 Looper.getMainLooper()。两者都返回相同的结果,但我想知道哪种方法正确? 我还从 Android 开发人员链接中
我有一个“affiliates”表,其中包含“user”和“referredBy”列。 给定一个用户,我希望获得该用户推荐的所有“n 级”玩家。对于 n=1,我们只关心您直接推荐的玩家数量: SELE
我在 PostgreSQL 9.5 数据库中有两个表: project - id - name task - id - project_id - name - updated_
请帮助我怎样才能得到我预期的结果,在此先感谢并抱歉我的英语不好。 PHP: $dog = implode(',', $data['dogbreed']); $query .= "AND `do
我有 let impulse = CGVectorMake(CGFloat(Constants.impulse), 0) 如何在不创建另一个 CGVector 的情况下得到它的负值? 我正在考虑在 C
我是一名优秀的程序员,十分优秀!