小编ruf*_*fus的帖子
图像溢出 div 建议
我相信这真的很容易，但我已经研究这个问题一段时间了，我的大脑一片空白。我有一个 div，里面有一个图像。图像似乎只是溢出了 div 边框，这让我很生气。我在下面有一张图片向您展示了与 css 一起发生的事情。
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
width: 100%;
height: auto;
}<div id="avatar">
<img src="http://i.imgur.com/dkzoNCc.png"></div>我在主 div #avatar 上有一个边框，这样我就可以看到 div 的整个大小。我想要的只是图像缩放到 div 的大小。如果我将高度设置为 100%，它会很好地进入 div，但是在调整它的大小时它开始溢出 div。我希望图像在宽度而不是高度上调整大小。
我在这里错过了一些非常简单的东西吗？我不想使用隐藏在图像上的溢出，因为我相信这只会切断其中的一部分。
谢谢大家
13
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数
CSS在悬停时轻松进出
我有一个简单的div,圆形border-radius,50%.在hover圆角半径的变化为零.我使用了以下完美的css代码.
.design-box {
width: 100%;
height: 250px;
margin: 100px auto;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
position: relative;
}
.design-box:hover {
border-radius: 0;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}<div class="design-box"></div>我想要发生的是,当div不再徘徊时,我希望转换到ease out并慢慢转变回原来border-radius的50%.我不能让它工作,我在这里错过了一个简单的步骤？
谢谢
5
推荐指数
推荐指数
1
解决办法
解决办法
1747
查看次数
查看次数
使移动边框动画在方形元素上工作
我试图让一个移动的边框CSS动画在广场上工作,但我不知道如何让它工作.它在圆上工作正常,因为我只使用关键帧的旋转过渡.这是我目前的标记.
.box {
width: 50px;
height: 50px;
margin: 50px auto;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.box .border {
position: absolute;
top: -4px;
left: -4px;
width: 50px;
height: 50px;
background: transparent;
border: 4px solid transparent;
border-top-color: orangered;
border-radius: 50%;
animation-name: border;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes border {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}<div class="box">
<div class="border"></div>
</div>3
推荐指数
推荐指数
1
解决办法
解决办法
3613
查看次数
查看次数
jQuery在位置上添加类
我正在尝试添加一个活动类,它只是一个li元素的边框,具体取决于加载的页面,但是我遇到了让它正常工作的问题.活动类确实应用但它似乎适用于所有li元素,而不仅仅是直接链接到相关页面的元素.
只是无法解决我在这里失踪的问题.
谢谢
<ul class="main-nav">
<li id="page1"><a href="index.php">Index</a></li>
<li id="page2"><a href="test1.php">test1</a></li>
<li id="page3"><a href="test2.php">test2</a></li>
<li id="page4"><a href="test3.php">test3</a></li>
</ul>
.active {
border: 1px solid #fff;
}
switch (window.location.pathname) {
case '/myfolder/index.php':
$('.main-nav #page1').addClass('active')
case '/myfolder/projects.php':
$('.main-nav #page3').addClass('active')
case '/myfolder/contact.php':
$('.main-nav #page4').addClass('active')
}
1
推荐指数
推荐指数
1
解决办法
解决办法
369
查看次数
查看次数
如何根据页面位置更改导航链接颜色
嗨，我正在努力研究如何让我的粘性导航链接在到达页面上的特定部分时更改滚动颜色。目前我已经设置好了，当点击导航链接时，滚动动画会将您带到页面上的特定部分，并向链接添加一个活动类（更改为红色）。当滚动到其部分时，我只想将活动链接更改为红色。这是我目前的标记。
谢谢
$("#nav-item-1").click(function () {
$('html, body').animate({
scrollTop: $("#section1").offset().top
}, 2000);
});
$("#nav-item-2").click(function () {
$('html, body').animate({
scrollTop: $("#section2").offset().top
}, 2000);
});
$("#nav-item-3").click(function () {
$('html, body').animate({
scrollTop: $("#section3").offset().top
}, 2000);
});
$("#nav-item-4").click(function () {
$('html, body').animate({
scrollTop: $("#section4").offset().top
}, 2000);
});
$("#nav-item-1").click(function () {
$("a").removeClass('active');
$("#nav-item-1").addClass('active');
});
$("#nav-item-2").click(function () {
$("a").removeClass('active');
$("#nav-item-2").addClass('active');
});
$("#nav-item-3").click(function () {
$("a").removeClass('active');
$("#nav-item-3").addClass('active');
});
$("#nav-item-4").click(function () {
$("a").removeClass('active');
$("#nav-item-4").addClass('active');
}); * {
padding: 0;
margin: 0;
}
.active {
color: red;
}
.container { …1
推荐指数
推荐指数
1
解决办法
解决办法
4014
查看次数
查看次数
Javascript if或switch语句添加一个类
我只是想为一个元素添加一个简单的类,但我不确定我是否会更好地使用和if语句或开关.我使用if语句编译了下面的代码,但是在将其转换为交换机以进行测试时会感谢一些帮助.
if (currentSlide === 0) {
slide.classList.add('class0');
} else if (currentSlide === 1) {
slide.classList.add('class1');
} else if (currentSlide === 2) {
slide.classList.add('class2');
}
-4
推荐指数
推荐指数
1
解决办法
解决办法
59
查看次数
查看次数