小编Jan*_*ath的帖子

我有一个菜单设置为最大宽度和展开/折叠切换.我为此使用jquery切换.但我使用的过渡不起作用.

 .campervan-info-list {
   transition: height 1s ease;
 }

我尝试用jquery幻灯片切换慢.但它适用于整个div.

我在这里错过了什么？

的jsfiddle

我只想为图像添加边框并填充，我也需要过渡效果。它工作正常，但有一些问题：

1. 它在悬停时显示图像中的微小移动（不固定）
2. 过渡不顺畅。

我尝试了一切。

我应用box-sizing:border-box;并给图像留了 2 像素的边距，并在悬停时将其删除，但仍然没有成功。

请参阅此示例。一切都很好，并且图像在悬停时不会移动。

这是我的代码：

.home-item1 {
  height: 107px;
  width: 108px;
  cursor: pointer;
  box-sizing: border-box;
}

.home-item1 img {
  border-radius: 50%;
  margin: 2px;
  transition: 0.2s ease-in-out;
}

.home-item1 img:hover {
  border: 2px solid red;
  margin: 0px;
  padding: 2px;
}

<div class="home-item1">
  <img src="http://i64.tinypic.com/2s0ftrc.png" alt="">
</div>

我缺少什么？请检查小提琴并告诉我。

jsfiddle

我只想更改 svg 填充颜色和悬停颜色。但我看到这个 svg 像这样附加：

<use xlink:href="#search-magnify"></use>

我认为它指的是网站上某个地方的这个 svg。我只想更改填充颜色而不编辑原始 svg。所以我尝试用这种方式用类和样式将它包裹在跨度上。

.icon svg path{
  fill: red;
  color: red;
}

但它根本不起作用。这是小提琴。

我在这里缺少什么？难道这不能通过css实现吗？

可以将媒体查询嵌套在元素内吗？如果我想在其他地方使用，min-width: 480px将会出现巨大的重复。请看我的代码示例。还是只用老方法？任何想法？

萨斯

.navbar {
     height: 500px;
     width: 500px;

     @media screen and (min-width: 480px) {
         background-color: lightgreen;
     }
}

.items {
    padding: 15px;
    color: red;

    @media screen and (min-width: 480px) {
        border: 1px solid black;
    }
}

CSS

@media screen and (min-width: 480px) {
   .navbar {
       background-color: lightgreen;
   }

   .items {
       border: 1px solid black;
   }
}

我只想在焦点状态时摆脱下拉列表中的轮廓。看到这张图片

我尝试使用 !important 覆盖引导程序，但根本不起作用。只需检查开发工具并突然看到这一点。

Bootstrap 也使用 !important 标签。所以我无法覆盖它。我可以使用 id 按钮并将焦点轮廓设置为 0，但我的网站中有很多下拉列表。这种情况有什么解决办法吗？

.bootstrap-select .dropdown-toggle:focus{
   outline: none!important;
}

我有一个太阳形div.我只想在悬停边框和对象之间的透明间隙悬停时显示边框.

首先,我尝试使用盒子阴影,但不能产生白色间隙.它需要纯色,然后我尝试这种方式.但差距并没有出现.

这是我的代码.

    .sun-quote-pages{
      border-radius: 50%;
        background-color: #f4953b;
        width: 4.1em;
        height: 4.1em;
        border: 2px solid transparent;
        transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
    }
    
    .sun-quote-pages:hover {
         transform: scale(1.3);
        border: 2px solid #f4953b;
        margin: 2px;
        padding: 2px; 
    }
    
    
    .wrapper{
      margin-left:150px;
      margin-top:50px;
    }

    <div class="wrapper">
      <div class="sun-quote-pages">   
      </div> 
    </div>

我在这里错过了什么？

的jsfiddle

我只想显示多行和猫头鹰点。像这样。

但似乎没有内置选项。所以我试着给

.owl-item {
width: 20%;
}

所以它将在 5 个项目中。但它根本不起作用。我认为将应用插件样式。

这是小提琴。https://jsfiddle.net/7mt5aL2x/

任何解决方案？

I just want to animate my image through curved path. Like this way. ( I'm using position absolute for positioning. ) Did some research and found that css transform can do the job. It can be easily done by straight line. But curved path?

I tried to combine with css transform-origin + transform:rotate but I didn't get exact that I want. Clearly I want to move around 80% to the left curved and need to come to original position. I …

我只需要像这样设置双色调背景的样式。

我尝试并成功使用线性渐变

背景：线性渐变（172deg，#ECB034 50%，#BE883C 50%）；

但在调整网页大小时遇到​​问题。它只是与角没有很好地对齐。表现得很奇怪。像这样

有什么办法可以做到这一点吗？

.cta{\n  padding: 60px 0;\n  background: linear-gradient(172deg, #ECB034 50%, #BE883C 50%);\n  text-align:center;\n}\n\n.cta h3{\n  font-size: 58px;\n  margin-bottom: 30px;\n  font-weight: 700;\n}\n\n.cta a{\n  padding: 16px 49px;\n  border: 2px solid #000;\n  color: inherit;\n  font-size: 20px;\n  text-transform: uppercase;\n  display: inline-block;\n  font-weight: 500;\n}

    <div class="cta text-center">\n      <div class="container">\n        <h3>Let\xe2\x80\x99s talk about your project.</h3>\n        <a href="">Get Started ></a>\n      </div>\n    </div>

\n

我想在悬停时更改div背景颜色和图像.像这样.

我试过这种方式.但它只改变了背景颜色.有没有办法实现这种情况？

<div class="col-md-4">
  <div class="icon-wrapper"></div>
     <p>Products</p>
</div>

.icon-wrapper {
    background: url("/assets/human-resources.png");
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    height: 120px;
    position: relative;
    width: 120px;
    border-radius: 50%;
    transition: all 0.2s;

    img {
        top: 22%;
        left: 24%;
        position: absolute;
    }

    &:hover {
        background: blue;
        background-position: center;
        background-repeat: no-repeat;
        background: url("/assets/car-white.png");
    }
}