草庐IT

css - div悬停背景颜色变化?

全部标签

javascript - CSS 3D变换以制作给定边长的梯形

我有一个给定尺寸(比如100x300像素)的元素,它位于高度相同且宽度可变的容器中,我想使用rotateX围绕-webkit-transform-进行转换origin:topcenter;在选择容器的-webkit-perspective时,图像的底线看起来保持在原处,但只会扩展以填充整个容器。哇,这听起来令人困惑。这是一张照片:基本上,我想创建一个上部宽度固定、下部宽度可变的梯形。但是我不能完全弄清楚关系背后的数学......欢迎使用Javascript。以下示例适用于正文宽度为600像素的情况:http://jsfiddle.net/24qrQ/现在的任务是随着body的宽度不断改

javascript - 使用javascript设置CSS动画延迟

我的css文件中有一些关键帧动画。已经指定了一个动画延迟。包装器div具有属性数据延迟。我想获取css文件中的animation-delay,并为其添加data-delay的值。然后我希望动画以新的延迟开始。我尝试了ele[i].style.animationDelay。但似乎这会返回null,直到我为其设置一个值。如果我设置ele[i].style.animationDelay='5s'动画仍然会随着css文件的延迟运行。HTMLHitest!CSSbody{font-size:300%;}#wrapperh1{position:absolute;}#hi{transform:tra

javascript - javascript 中的 bg 颜色、悬停、!important 和 .css

我遇到了一个问题。我已经创建了一些“选项卡”功能,如演示中所示:http://jsfiddle.net/4FLCe/计划是,当您将鼠标悬停在选项卡上时,其颜色变为颜色A,当您单击选项卡时,其颜色变为颜色B。从演示中可以看出,单击后悬停时背景颜色停止变化。我想在悬停的背景颜色中添加!important,结果可以看到:http://jsfiddle.net/4FLCe/1/但是这并不像我想要的那样执行,悬停现在可以在javascript设置的背景颜色上工作。然后我将!important添加到javascript中的颜色集。这导致了一些可怕的事情。唯一理解我想要实现的目标的浏览器是Opera

javascript - 定义图像的一部分并分配给悬停、单击事件

假设我们有一张人体图像,我希望当用户将鼠标悬停在body​​的一部分(头部、ARM等)上时,这个器官会变成绿色,并且当他点击时会发生定义的Action。使用javascript可行吗?如果是的话,概念是什么?问题原因:目标:这是现有项目的一小部分,用户可以在其中输入他的病史,所以我想给他一个下拉菜单,所有器官只显示一个人类模型,他点击并保存他的tramua历史等。要做到这一点,我想我需要一个人体图像,并定义该图像上表示的每个器官的X-Y边界,并为其赋予一些属性(名称)。用户悬停:例如器官显示的边界和背景颜色为绿色当用户点击时,它会调用该对象表单。js-jquery中是否存在类似的东西?

javascript - 在窗口调整大小时调整 div 大小

我有这个代码html,body{width:100%;margin:0;padding:0;}#main{margin:0auto;width:963px;height:642px;}#preload{display:block;position:absolute;width:100%;height:100%;}.loading{position:absolute;top:43%;left:47%;z-index:2;display:none;}$(document).ready(function(){$(window).on('resize',function(){varmaxWid

javascript - 如何选择下一个div?

我在一个页面中多次出现这个部分:Views我现在正在为a.showComment点击事件在js文件中编写代码。现在我想选择下一个div.writeComment。如何选择它? 最佳答案 在变量nextDiv中你可以做任何你想做的事情使用.nextAll()方法允许我们在DOM树中搜索这些元素的后继元素,并从匹配元素构造一个新的jQuery对象。使用.next()搜索您点击的DOM元素试试这个:$('.showComment').click(function(){varnextDiv=$(this).nextAll("div.writ

javascript - Gridster - 保存 div 的 html 内容以动态加载网格

我已经用gridster做了一些测试,我可以保存一些gridster数据,比如坐标、大小、ids等。但我无法保存填充gridster的div的内容,我可以稍后加载每个元素的gridster坐标。这是我的代码:$(document).ready(function(){vargrid_canvas=$("#homepage>#grid").gridster({widget_margins:[10,10],widget_base_dimensions:[140,140],widget_selector:".gs_w",shift_larger_widgets_down:false,seria

javascript - 可在特定的 div 内拖动

我正在从事一个使用了可拖动事件的元素。现在的问题是draggable()事件对我来说效果很好......但是因为我想存储我的位置,所以我使用了以下javascript。这个也很好用......但问题是它适用于整个屏幕。我只是希望它仅通过使用此代码在特定的parentdiv上运行。那有可能吗?function$(el){returndocument.getElementById(el);}vartzdragg=function(){return{move:function(divid,xpos,ypos){vara=$(divid);$(divid).style.left=xpos+'p

javascript - 我可以使用 Javascript 为同一个 CSS 属性设置多个值吗?

我想以编程方式将CSScursor值设置为-webkit-grab和-moz-grab。例如,在样式表中,它将表示为mySelector{cursor:-webkit-grab;cursor:-moz-grab;}所以在这里,mySelector元素定义了两次光标。Webkit浏览器使用第一个定义,Firefox使用第二个。我想知道Javascript中是否有任何方法可以做同样的事情。我意识到我可以设置一个类(class),但我的问题更多是出于好奇,看看是否可行,而不是解决我目前遇到的现实问题。编辑澄清一下-我发布的CSS(尽管有一个有效的选择器)在两种浏览器中都有效。我只是想知道是否

javascript - 检测悬停是否存在或可用

长期以来,每个人都在插入特征检测。我想检测访问者的浏览器是否支持:hover伪类。据我了解,即使不是大多数,也有足够多的移动设备不支持悬停,因此我想相应地调整我的事件监听器。但是如果没有移动检测,我不确定如何完成此操作,而且到目前为止我还没有通过Google或SO找到任何东西。也许类似于问题#8981463$(function(){varcanHover=$(document).is(":hover");});我要到下周才能在移动设备上对此进行测试。想法? 最佳答案 现在有一个支持良好的媒体查询来检测是否支持悬停:https://d