小编Viv*_*K R的帖子

我试图在边界上悬停时扩展的边界上获得过渡悬停效果.

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: left 250ms ease-in-out, right 250ms ease-in-out;
  opacity: 0;
}

h1:hover:after {
  opacity: 1;
}

<h1>CSS IS AWESOME</h1>

我在Jsfiddle上尝试过这个

我正在使用Bootstrap来制作可折叠的嵌套div /按钮.我想在展开时折叠div的所有兄弟,并在折叠时折叠div的所有子节点(这样扩展的div只是从一个根div到内部div的一条路径).

我选择使用jQuery而不是使用Bootstrap的Accordion - 只是带有相关div的按钮.

所以我尝试选择所有可以扩展的div并使用show.bs.collapse事件,以便我知道哪个div被扩展了.

$(function () {
  $(".collapse").on('show.bs.collapse', function () {
    console.log ($(this).context.id);
  })
});

如果我的树是这样的:

• 1 - 扩大

  • 2 - 扩大

    • 3 - 崩溃了

  • 4 - 崩溃了

• 5 - 崩溃了

• 6 - 崩溃了

我扩展3,我没有得到:

3

但:

3
2
1

为什么将show.bs.collapse应用于div 1和2？

变换如何:translate3d(50%,0,0)与左边不同:css为50%？继承人我所做的jsfiddle.

transform: translate3d(50%,0,0)

和

left:50%;

如何以循环方式堆叠div，使最后一个div应该位于第一个div之下但位于第二个div之上。CSS可能吗？任何帮助将不胜感激。

请找到Codepen。提供示例代码段

<div class="frame">
  <div class="lolly-pop__wrapper">
    <div class="lollypop-top">
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
      <div class="lollypop-top__item"></div>
    </div>
  </div>
</div>


.frame {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  background: #F5CE51;
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; …

我的情况是这样的:我有2个部分重叠的div,每个都有悬停效果:Div 1 - 包含一个条形图,其中的条形图对悬停有影响.Div 2 - 是一个横跨屏幕底部20%的区域,当用户将鼠标悬停在屏幕底部时(例如靠近屏幕底部),控件从底部向上滑动,以允许它们将全局属性更改为表格.

我希望浏览器能够独立地检测任何一个对象上的悬停,但发生的事情是顶部的任何对象都检测到悬停,但另一个则没有.我发现了一堆几乎相关的问题,但似乎没有回答这个问题.

这是一个原型,所以只能在一个浏览器(最好是Chrome)中工作的hacky答案/答案都可以.使用CSS,jQuery或JS的解决方案也都可以.

编辑:添加了一个小提琴,我认为将说明我的问题:http://jsfiddle.net/Gkgrx/

因此,如果你徘徊在"桌子"的底部(悬停时变成绿色的大红色方块),当我击中导致桌面控制向上滑动的区域(它确实)时,桌子会丢失其悬停状态 - 我想要它还能检测到悬停.

显然我需要在这里剪切和粘贴代码:

CSS:

.controlhover {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 150px;
    z-index: 1;

}

.tablecontrol {
    position:absolute;
    bottom: 0px;
    left: 200px;
    right: 200px;
    background-color: #242D2F;
    opacity: .9;
    height: 70px;
    color: #FFFFFF;
}

.table {
    position: absolute;
    top: 0px;
    left: 50px;
    right: 50px;
    height: 500px;
    background-color: red;
}

.table:hover {
    background-color: green;
}

HTML:

<div class="table">This is a table that does stuff …

我正在尝试在 Next.js 反应组件中使用 new Date() 构造函数。但它在生产中抛出低于控制台的错误。

这就是我使用日期构造函数的方式。

date: "2022-06-21T18:30:00.000Z"

{new Date(date).toLocaleDateString("en-US")}

Uncaught Error: Minified React error #425; - https://reactjs.org/docs/error-decoder.html?invariant=425
Uncaught Error: Minified React error #418; - https://reactjs.org/docs/error-decoder.html?invariant=418
Uncaught Error: Minified React error #423; - https://reactjs.org/docs/error-decoder.html?invariant=423

知道为什么会这样。如有帮助，将不胜感激。谢谢！

如何编写整数值 if 条件的把手。我已经尝试过下面的代码但不起作用。

{{#if (eq number '1')}}
        number 1    
{{else}}                
      another number    
{{/if}} 

我是three.js和webgl编程的初学者。所以我在three.js中创建了一个盒子，它的工作正常，但是问题是当我在z轴上设置相机位置时（例如：camera.position.z = 2;），盒子消失了。谁能解释我为什么会这样，如何正确设置相机的位置？

尝试camera.position.z = 2;在小提琴中取消注释

function init() {

    var scene = new THREE.Scene();

    var box = getBox(1, 1, 1);

    scene.add(box);

    var camera = new THREE.Camera(45, window.innerWidth/window.innerHeight, 1, 1000 );
    //camera.position.z = 2;

    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("webgl").appendChild(renderer.domElement);

    renderer.render(scene, camera);
}

function getBox(w, h, d) {
    var geometry = new THREE.BoxGeometry(w, h, d);
    var material = new THREE.MeshBasicMaterial({
        color : 0x00ff00
    });

    var mesh = new THREE.Mesh(geometry, material);

    return mesh;
} 

init();