javascript-图像悬停时CSS颜色叠加
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-图像悬停时CSS颜色叠加，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4086字，纯文字阅读大概需要6分钟。
内容图文
我尝试了其他答案,但没有一个可以与我的特定设置一起使用.我无法使用任何ul / li设置,因此请不要建议.我正在尝试使透明的橙色层显示在图像上.我无法使用绝对定位,该网站建立在基金会4上,并且反应灵敏.
到目前为止,我得到的是图像下方而不是顶部的背景色.最初,我还想在CSS中完成图片中的绿色条,但是我也无法做到这一点.我也无法使其与图像作为div的背景一起使用,因为我必须用像素设置高度/宽度,这会破坏响应位.
这是我要执行的操作的图像：
的HTML
<div>
<div class="work-button">
<img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
<div class="work-sub">Web Design</div></div>
</div>
的CSS
.work-button {
text-align: center;
margin: 7%;
}
.work-hover:hover {
background: rgba(229, 115, 37, 0.7);
transition: all 0.2s ease-in-out;
transform: scale(0);
border-radius: 20%;
}
.work-sub {
text-align: center;
font-family: "Candal", Verdana, sans-serif;
font-size: 1.5em;
color: #fff;
margin-top: -15%;
}
关于答案的注意事项
所选答案确实有其错误.调整页面大小时,覆盖层不会随之调整大小.取而代之的是,它将保持在页面初始化时的大小.当您再次刷新页面时,它会再次进行自我调整.对于用户而言,这不是问题,但更多的是困扰我的事情,其他开发人员/雇主也会对其进行检查.无论如何,再次感谢布兰登·戴维斯！
**更新**
因此,似乎我两次调用了onresize函数,因此它仅服从第二个函数试图执行的操作.
window.onresize = function () {
resizeWorkOverlays();
resizeSmallOverlays();
}
如果您尝试两次使用此功能,则可以通过这种方式工作.我似乎无法第三次成功重复此操作.希望这可以帮助！
最终更新：2014年8月7日：See this new result functioning here.自那以后,我就将鼠标悬停了100％CSS解决方案！我将在这里尽快发布结果代码.
解决方法:
这是我想出的：
(更新3)
的CSS
.work-button {
display: inline-block;
background: none;
transition: all 0.4s ease-in-out;
padding: 0;
}
.work-hover {
float: right;
border: 6px solid rgba(255, 255, 255, 1.0);
box-shadow: 0px 1px 3px black;
border-radius: 20%;
}
.work-sub:hover, .work-hover:hover > .work-sub {
background: rgba(229, 115, 37, 0.7);
border-radius: 20%;
/* box-shadow: 0px 1px 3px black; */
opacity: 1.0;
}
.work-sub {
text-align: center;
font-family: "Candal", Verdana, sans-serif;
font-size: 1.5em;
color: #fff;
float: left;
position: absolute;
opacity: 0.0;
transition: all 0.4s ease-in-out;
border: 6px solid #ffffff;
}
的HTML
<div>
<div class="work-button">
<img class="work-hover" src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="" />
<div class="work-sub">Web Design</div>
</div>
</div>
的JavaScript
我最终使用Javascript创建了div的初始高度和宽度.基于图像的高度,因此它仍然可以响应.它可能不是最优雅的方法,但它可以工作.
function resizeWorkOverlays() {
// Edit These to reflect your proper class names
var workButtonClass = 'work-button';
var workButtonImage = 'work-hover';
var workButtonSub = 'work-sub';
////////////////////////////////////////////////
///
/// For Overlapping Border Put the Number of
/// pixels that the border is the width of
/// the border on the object. If unsure put '0'
///
/////////////////////////////////////////////////
var borderWidth = 0; // Width of the border
var workButtons = document.getElementsByClassName(workButtonClass); // Gets All Elements with the class defined in 'workButtonClass' varible
var fullBorderWidth = borderWidth * 2; // Accounts for border-top and border-bottom and left and right
for (var i = 0; i < workButtons.length; i++) {
var workButton = workButtons[i]; // Work with a single work button
var workImage = workButton.getElementsByClassName(workButtonImage)[0]; // Gets First SubHeading In A 'work-hover'
var workSubheading = workButton.getElementsByClassName(workButtonSub)[0]; // Gets First SubHeading In A 'work-button'
//Sets the workSubHeading Styles
workSubheading.style.height = workImage.offsetHeight - fullBorderWidth + "px";
workSubheading.style.lineHeight = workImage.offsetHeight - fullBorderWidth + "px";
workSubheading.style.width = workImage.offsetWidth - fullBorderWidth + "px";
}
}
window.onresize = function () {
resizeWorkOverlays(); // This will run everytime the browser resizes
}
resizeWorkOverlays(); // This sets the overlays initially
您也可以考虑使用正方形图像,并使用边框半径圆角,而不是使用“预格式化”图像.然后,叠加层上的边框半径将与图像匹配.虽然只是一个想法.
小提琴更新：
内容总结
以上是互联网集市为您收集整理的javascript-图像悬停时CSS颜色叠加全部内容，希望文章能够帮你解决javascript-图像悬停时CSS颜色叠加所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。