Tag: css3

如何用省略号“……”替换第一个溢出元素: 我有一个带有多个标签的div，div是固定的宽度和高度，我想用“……”替换溢出父版本的文本。 one one one one one one one one one one one one two two two two two two two two two two two two three three three three three three three three four four four four four four four four four four five five five five five five five five five five six […]

jQuery应该模糊全屏背景图像: HEJ！我需要一些jQuery 在中间模糊我的全屏背景图像 1000px （所以：margin：0 auto; width：1000px;）。这是一个例子： http ： //imageshack.us/a/img443/4976/j7qj.jpg 我知道这不是一个问题 – 但我需要一些帮助，因为我的jQuery（或JS）知识不是基本的。无论如何，我希望有人可以帮助我。我正在使用它作为我的全屏背景图像：bg {left：0; 最小高度：100％; 最小宽度：100％; 位置：固定; 顶部：0; z-index：-1; }

jQuery跨多个表的交替行颜色: 我注意到严格使用jquery交替行颜色的问题。你可以看看这个小提琴，看一下我将要描述的例子。我正在使用CSS3来控制表格上的条带化，这些表格在多个表格中按预期工作。 .table-zebra tbody > tr:nth-child(even) > td {background-color: lightgrey;} 每个偶数行都是浅灰色条纹。计数从第一行开始。对于不支持CSS3的浏览器，我使用jquery来模仿这个:( .table-striped用于此示例以显示小提琴的差异） $(“.table-striped tr:odd”).css(“background-color”, ‘lightgrey’); 当我有多个具有奇数行的表时，jquery将继续前一个表的计数，这会错误地交替行。除了使用$ .each之外，还有一种更简单的方法可以在jquery中处理它吗？

div中的过渡: 我在同一行有三个不同的盒子。我希望在框内单击时在这些框中进行转换。现在，当我点击任何一个框时，它将从左向右扩展并获得全宽，其他框在下一行堆叠。我想要的是当我点击红色框时，该框必须从左向右展开，与剩余的框重叠。类似地，当我单击绿色框时，它必须从其两侧扩展并在左侧和右侧重叠两个框并获得全宽。类似地，当我点击蓝色框时，它必须从左侧展开并填充与剩余框重叠的宽度。谁能帮帮我吗？我的代码是： Transition .box { width:30%; height: 200px; margin: 10px; float:left; } #first { background-color: red; } #second { background-color: green; } #third { background-color: blue; } $(function() { var containerWidth = $(“.container”).width(); $(“.box”).click(function() { var id = $(this).attr(“id”); $(“#”+id).animate({width: “100%”}); }); }); Jsfiddle链接

单个滚动在不同的div中有2个相同的布局？: 我在页面上有2个带有表格结构的div。我想让它们响应，目前唯一的方法是在某一点之后放置水平滚动。这些div在不同的包装器/容器中，所以不能在一个包装器中移动它们。我的问题是我只想要一个horizontall滚动而不是两个。做这个的最好方式是什么？这样他们就有一个卷轴可以水平移动。以下是我正在尝试的（问题） * { margin: 0px; padding: 0px; } .ScrollWrapper1 { width: 100%; overflow-x: auto; overflow-y: hidden; float: left; } .ScrollWrapper2 { width: 100%; overflow-x: auto; overflow-y: hidden; float: left; } .TableHead { width: 100%; overflow: hidden; float: left; } .row { float: left; width: calc(10% – 1px); text-align: center; border-right: […]

Angular 2：通过UI上的用户输入/事件动态控制SVG图像/图标Css样式: 我使用Jquery在Angular 2中动态控制svg图像的Css样式。 1：使用鼠标hover等事件进行控制下面是一个简单的圆圈.svg图像的示例代码，其中定义了初始样式，并且圆圈上的鼠标hover事件将在hover圆圈时触发“func1”： .st0{ fill:#FFFFFF; stroke:#000000; stroke-width:4; stroke-miterlimit:10; } 现在定义此函数：func1（）在其相应的组件（.ts文件）中，其中包含要使用jquery更改的样式。它看起来像这样： func1(){ console.log(“func1 has been called!”); $(“.st0”).css({“stroke”:”yellow”, “fill”: “blue”}); } 尝试探索其他事件（如“点击”）。 2.通过表格输入进行控制如果要使用表单输入更改svg的样式，则应使用动态绑定。在模板中示例附加代码（以及之前的svg代码）： Stroke Fill Submit 代码需要添加到相应的组件（.ts文件）中： stroke:any; fill:any; submit(){ console.log(“submit called!”+ this.stroke+” and “+ this.fill); $(“.st0”).css({“stroke”:this.stroke, “fill”: this.fill}); }

链接首次点击后，使链接无法点击，等待转换结束+ 1s，然后再次点击链接: 我有一个主菜单。当点击任何有孩子的PARENT 的链接时，子菜单打开。此时，将一个类moves-out添加到主菜单中，并启动CSS转换。转换结束后，显示子菜单。子菜单包含单击的（如果再次单击将带我们返回主菜单）并且它是子项。在这里，我的目标是禁用父上的click事件1秒钟，然后在这1秒后给它回复点击的能力，这样我们就可以回到主菜单了。导航的一个例子是： Home Blog About Contact PARENT Child 1 Child 2 Child 3 And so on… 对我有用的唯一方法是在主菜单添加了moves-out类时隐藏/显示PARENT，如下所示： $(‘.subnav-trigger’).on(‘click’, function(event) { event.preventDefault(); if ($(‘.main-nav’).hasClass(‘moves-out’)) { var $this = $(this); $this.hide(); setTimeout(function(){ $this.show(); }, 1000); } } 我尝试了很多东西，这是唯一接近我的目标的东西。取而代之的是$this.hide() ， $this.off(‘click’)正在运行但是在setTimeout内部我要做的就是重新获得点击不起作用。任何帮助将不胜感激。注意：我希望这可以防止快速点击/重新点击。不要忘记过渡;）再次感谢您的帮助。 SYA 🙂

可变高度，可滚动div，内容浮动: 我正在尝试构建这个Web应用程序的东西（它最终会为我的社区影院组提供舞台/道具/阙管理系统）并且我遇到了相当困难的问题。如果以前已经回答过这个问题，我当然无法找到与此特定问题相关的任何内容。这是我尝试的最后两个。从理论上讲，他们有最好的工作机会，但……他们没有工作。问题/ 2758651 /如何对变化高度DIV-上改变窗口大小问题/ 16837525 /调整-DIV高度与 – jQuery的所以我正在做的是创建一个页面，resize以适应当前的屏幕不动产我的问题是中央滚动div和’侧边栏’滚动div仅在它们具有固定高度时滚动。基本上，如果我在CSS中使用百分比高度，无论overflow: scroll;如何，它都会成为其内容的大小overflow: scroll; 正在设置。我认为这与float:left; 所有col-*-*元素的定义。我无法理解的是，当我将div设置为固定高度（比如height:300px; ）时，一切正常。因此，为什么我正在尝试JS / JQ解决方案，但显然甚至$(window).height()在Chrome中获取文档高度而不是’viewport’高度。这是页面，因为它具有固定的高度。 http://azarel-howard.me/stage-management/props-manager/我尝试了一些JS解决方案，但……它们似乎没有运行。或者他们遇到了同样的问题。编辑：代码按要求; Scene 1 Speaker-1: Speaker’s text Stage Props Scene 1 ‹ › Current Que Next Que CSS参考：这些摘录直接从bootstrap.css中提取 .col-lg-9, .col-lg-3 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; […]

打开响应式菜单时，覆盖Bootstrap 3站点中的内容区域: 当有人打开导航堆叠菜单时，我怎样才能用半透明[50％alpha]覆盖覆盖Bootstrap 3网站的内容区域，只有在手机上查看网站时[即仅用于@media（最大宽度）：767px）] 这甚至可以用CSS还是我必须使用一些jQuery？ UPDATE 谢谢你们 – 你提供了线索，我最终做的是： $(“.navbar-toggle”).click(function(){ $(“”).appendTo($(“.content, .footer”).css(“position”, “relative”)); }) // and some css /* navigation overlay */ div.overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); }

使用jQuery设置特定于浏览器的CSS属性: 我正在尝试修改background-image属性中的渐变值，我不能:( data = ‘ff55dd’; $(“.el”).css({ ‘background-image’ : ‘-webkit-gradient(linear, left top, left bottom, from(#’ + data + ‘), to(#aa1133))’, ‘background-image’ : ‘-webkit-linear-gradient(#’ + data + ‘, #aa1133)’, ‘background-image’ : ‘-moz-linear-gradient(#’ + data + ‘, #aa1133)’, ‘background-image’ : ‘-o-linear-gradient(top, #ff3345, #aa1133)’, ‘background-image’ : ‘-khtml-gradient(linear, left top, left bottom, from(#’ + data + ‘), to(#aa1133))’, ‘filter’ : ‘progid:DXImageTransform.Microsoft.gradient(startColorstr=\’#’ […]