小编Dan*_*niP的帖子
从100%过渡到自动
我有以下内容:http://jsfiddle.net/yHPTv/2491/
我想知道为什么过渡不起作用？它应该做的是将隐藏元素(可以是可变宽度)滑动到元素的右边缘.block,但是,它只是弹出.
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
left: auto;
right: 0;
}<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>我认为它与某些事情有关,left: auto因为如果我改变它left: 50%,它可以工作,但不是我需要的方式.
谢谢.
2
推荐指数
推荐指数
1
解决办法
解决办法
221
查看次数
查看次数
HTML <title>标签出现在页面上
我正在开发一个网页,并且刚刚开始研究内容/ css.我过去构建了很多网页,并使用两个不同的CSS文件(reset.css和styles.css)来设置我将要创建的页面的样式.
但是,当我创建这个最近的页面时,<title>标记在我测试时显示在网页中.有什么方法可以解决这个问题吗？
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>HOME _ JWD</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-logo"></div>
<div class="header-navbar">
</div>
</div>
</div>
</body>
</html>
重置CSS html {font-family:'Open sans',sans-serif; }
body {
margin: 0px;
}
* {
display: block;
text-decoration: none;
}
STYLES CSS
.container {
width: 100%;
}
.header …2
推荐指数
推荐指数
1
解决办法
解决办法
2390
查看次数
查看次数
获得阵列中最高的3个数字？
下面的代码返回数组中的最大数字.我试图弄清楚如何从阵列中获得前三个数字并且无法弄明白.
我也想弄清楚如何用他们的分数列出相应的工作.目前,具有"您的最高得分"的H1仅显示该数字并且未通过该作业(或最高数字的var名称).
有关如何实现这一点的任何想法？
谢谢!
HTML:
<div>
<h3> Job 95- <span id="score95"> </span> </h3>
<h3> Job 96- <span id="score96"> </span> </h3>
<h3> Job 97- <span id="score97"> </span> </h3>
<h3> Job 98- <span id="score98"> </span> </h3>
<h3> Job 99- <span id="score99"> </span> </h3>
<h3> Job 100- <span id="score100"> </span> </h3>
<h1> Your highest score was: <span id="highest"></span></h1>
</div>
JS
var job95 = 100;
var job96 = 100;
var job97 = 100;
var job98 = 100;
var job99 = 100;
var job100 = …2
推荐指数
推荐指数
1
解决办法
解决办法
87
查看次数
查看次数
为什么这些按钮不会向左浮动或显示内联块？
我正在尝试制作一段简单的代码,使一些链接位于页面的右上角,但它们不能很好地排列.它们一直垂直排列,我希望它们是水平的.我敢肯定这可能是我想念的东西,但我不确定是什么.我也试过使用浮动左,但它没有改变任何东西.
CSS和HTML
.social {
position: fixed;
right: 0;
/* display:inline-block; */
/* float:left; */
}
.social-buttons-list {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0;
/* display: inline-block; */
/* float:right; */
}
.social-button {
margin: 5px;
width: 50px;
height: 50px;
display: inline-block;
/* float:right; */
}<div class="social">
<ul class="social-buttons-list">
<li>
<a href="">
<img src="img/Twitter.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Facebook.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Snapchat.png" alt="" class="social-button">
</a>
</li>
</ul>
</div>2
推荐指数
推荐指数
1
解决办法
解决办法
400
查看次数
查看次数
将鼠标悬停在Twitter Bootstrap中的下拉菜单中
如何编写代码,当您将鼠标悬停在使用Twitter Bootstrap 3实现的下拉菜单上时,下拉菜单会显示,用户可以点击展开的下拉菜单的链接？
我写了以下HTML:
<nav>
<ul id="mainMenu">
<li><a href="/">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown">Blog<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/1">1</a></li>
<li><a href="/2">2</a></li>
</ul>
</div>
</li>
</ul>
</nav>
以下CSS:
ul#mainMenu li {
display: inline-block;
padding: 3px;
background-color: orange;
border-radius: 5px;
-webkit-transform: skewX(-6deg);
}
ul#mainMenu li:hover {
background-color: green;
}
但是,当您将鼠标悬停Blog在下拉菜单中的菜单上时,下拉菜单不会展开,但如果单击它,菜单会展开.
即使你扩展菜单,扩展菜单在布局上也是可怜的,因为扩展菜单中有多余的空白区域,可能是因为我在某种程度上倾斜了(-6deg).
此外,展开的菜单水平放置,而不是垂直放置.我不知道它为什么水平放置,但我能解决它吗？
谢谢.
[更新]由于某些原因,HTML代码无法正确显示.现在我必须检查如何解决它,如果我知道如何解决它,我会做.我在<pre><code>标签中写了这些信息.
1
推荐指数
推荐指数
1
解决办法
解决办法
8247
查看次数
查看次数
多个垂直100%高度和宽度div
我正在尝试创建100%宽度和高度的多个div,但是仍然惨遭失败.例:
<html>
<body>
<div id="wrapper">
<div id="1">100% height & width, all you can see when opening this file!</div>
<div id="2">I'll be 100% when you've scrolled #1 out of the window!</div>
</div>
</body>
</html>
这个解决方案的CSS是什么？我似乎无法让它工作.
1
推荐指数
推荐指数
1
解决办法
解决办法
707
查看次数
查看次数
Jquery - 在悬停时添加类
我想当鼠标继续lijquery 时为元素添加一个类:
<ul class="menu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
<script type="text/javascript">
var myMenu = $('.menu').children('li');
myMenu.on({
mouseenter: function() { $( this ).addClass( "is_hovered" ); },
mouseleave: function() { $( this ).removeClass( "is_hovered" ); }
});
</script>
但是我想只在鼠标移到另一个上时删除类li,如果没有在元素上保留类.
这可能吗？
1
推荐指数
推荐指数
1
解决办法
解决办法
271
查看次数
查看次数
使用 javascript 创建的自动播放 html 音频
我做了这个小脚本，可以控制网页上音轨的播放。
var source = "audio/burger.mp3"
var audio = document.createElement("audio");
audio.load()
audio.addEventListener("load", function() {
audio.play();
}, true);
audio.src = source;
$("#playBtn").click(function() {
audio.play();
});
$("#pauseBtn").click(function() {
audio.pause();
});
$("#stopBtn").click(function() {
audio.pause();
audio.currentTime = 0;
});<ul>
<li>
<a><i class="fa fa-play" aria-hidden="true" id="playBtn"></i></a>
</li>
<li>
<a><i class="fa fa-pause" aria-hidden="true" id="pauseBtn"></i></a>
</li>
<li>
<a><i class="fa fa-stop" aria-hidden="true" id="stopBtn"></i></a>
</li>
</ul>我想知道是否有办法在页面加载时播放文件。我知道这样，这真的是 90 年代的东西，但我必须在页面上测试一些东西。
1
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
在Chrome与IE中定位元素
我有一些元素,我试图在数学上排成两行.
我有一个thumb_container,它是一个div,绝对定位.然后在里面使用jquery我正在加载并附加这个for循环的图像缩略图:
for(var i = 0; i < 7; i++) {
var img = new Image();
$(img).addClass("thumb");
$(img).offset({ top:Math.floor(i / 5) * 95, left: (i % 5) * 55 })
img.src = "images/girl_thumb_" + i + ".jpg";
}
这是相关的CSS
img, div {
position:absolute;
}
#thumb_container {
left:15px;
top:370px;
}
这适用于Chrome就好了.我得到两行和五列所有对齐jsut罚款,这是一个截图.
但在IE中,行向下向右级联.
0
推荐指数
推荐指数
1
解决办法
解决办法
83
查看次数
查看次数
CSS文本图像
我试图将文字放在图像上,如下所示:
.gallery-image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}<div class="gallery-image">
<a href="#">
<img src="image.jpg" width="280">
</a>
<h2><span>Text</span></h2>
</div>但我的文字在图片后面,我该怎么做才能解决这个问题？
0
推荐指数
推荐指数
1
解决办法
解决办法
147
查看次数
查看次数
尝试从<li>中选择单个项目并将该值放入文本框中
我有
<input type="text" id = "addressbox" size="30" onkeyup="showResult(this.value)">
<ul class="livesearch" id="livesearch" style="border: 1px solid rgb(165, 172, 178);">
<li><a href="#">ADDRESS1</a></li><br>
<li><a href="#">ADDRESS 2</a></li><br>
</ul>
并为JavaScript
$('.livesearch').click(function() {
var value = $(this).text();
var TheTextBox = document.getElementById("addressbox");
TheTextBox.value = value;
});
当我点击链接时,它会选择所有地址<ul>而不是我点击的单个地址,例如,我点击地址1但是在文本框中地址1和地址2显示....我做错了什么？
0
推荐指数
推荐指数
1
解决办法
解决办法
237
查看次数
查看次数
为动画计数功能添加逗号
我已经尝试了所有可以在网上找到的关于此的所有内容，但它们似乎都处理静态数字，而不是动画数字。
是否可以通过修改此函数将逗号添加到我的值中？
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 500,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
0
推荐指数
推荐指数
2
解决办法
解决办法
5340
查看次数
查看次数