Question

我正在使用全屏Google文档iframe上的覆盖图。我希望文档的顶部被100％宽度的div覆盖，该div在悬停时会逐渐消失，显示可单击的docs选项。

我已经完成了淡入淡出过渡，但是不可见的div阻止了iframe的点击。如果我使用pointer-events：none，则更改z-index或display：none会在移动光标时产生讨厌的闪烁效果。

有没有解决的办法？

https://github.com/plasticplant/miscresearch/tree/master/miscresearch

#background-site {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#background-site iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: scroll;
}

#header {
  position: absolute;
  width: 100%;
  z-index: 30;
  font-size: 55px;
  font-family: 'Sporting_Grotesque-Bold';
  padding: 5px;
  text-align: center;
  transition: 0.3s;
  background: white;
 }

  #header:hover {
  opacity: 0;
}

<div id="header">
miscresearch
</div>

<div id="background-site"><iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe></div>

Answer 1

也许使用z-index是更好的方法，因为在：hover上进行let/cc时，您不会悬停任何元素，因此会产生讨厌的效果。

#output:
Keras:
Total runtime =  18.451340198516846
LRL: 0.145 LRAP: 0.493
PyTorch:
Total runtime =  19.641956329345703
LRL: 0.092 LRAP: 0.491


def score(true, pred):
    lrl = label_ranking_loss(true, pred)
    lrap = label_ranking_average_precision_score(true, pred)
    print('LRL:', round(lrl), 'LRAP:', round(lrap))

def main():
    x,y = load()
    x_train, x_test, y_train, y_test = train_test_split(x, y)
    scaler = StandardScaler()
    x_train= scaler.fit_transform(x_train)
    x_test= scaler.transform(x_test)
    epochs = 100
    batch_size = 32

    print("Keras:")
    t_start = time.time()
    model= Sequential()
    model.add(Dense(60, activation="relu", input_shape=(120,)))
    model.add(Dense(30, activation="relu"))
    model.add(Dense(10, activation="sigmoid"))
    model.compile(optimizer='adam', loss='binary_crossentropy', metrics=['accuracy'])
    model.fit(x_train, y_train, batch_size=batch_size, epochs=epochs)
    pred = model.predict(x_test)
    t_finish = time.time()
    total_time = t_finish-t_start
    print('Total runtime = ', total_time)
    score(y_test, pred)

    print("PyTorch:")
    t_start = time.time()
    model = torch.nn.Sequential(
        torch.nn.Linear(120, 60),
        torch.nn.ReLU(),
        torch.nn.Linear(60, 30),
        torch.nn.ReLU(),
        torch.nn.Linear(30, 10),
        torch.nn. Sigmoid())
    loss_fn = torch.nn. BCELoss()
    optimizer = torch.optim.Adam(model.parameters(), lr=0.001)
    n_batch = int(x_train.shape[0]/batch_size)
    for epoch in range(epochs):
        avg_cost = 0
        for i in range(n_batch):
            x_batch = x_train[i*batch_size:(i+1)*batch_size]
            y_batch = y_train[i*batch_size:(i+1)*batch_size]
            x, y = Variable(torch.from_numpy(x_batch).float()), Variable(torch.from_numpy(y_batch).float(), requires_grad=False)
            pred = model(x)
            loss = loss_fn(pred, y)
            optimizer.zero_grad()
            loss.backward()
            optimizer.step()
            avg_cost += loss.item()/n_batch
        print(epoch, avg_cost)
        x, y = Variable(torch.from_numpy(x_test).float()), Variable(torch.from_numpy(y_test).float(), requires_grad=False)
    pred = model(x).data.numpy()
    t_finish = time.time()
    total_time = t_finish-t_start
    print('Total runtime = ', total_time)
    score(y_test, pred)

if __name__ == '__main__':
    main()

Answer 2

尝试一下，应该可以工作-我使用了一些div复制了您的问题，但是很清楚了。

首先，使用样式“ pointer-event：none;”。使上层div可以通过选择较低的div具有mouseover和mouseout事件，这些事件调用javascript来更改覆盖的不透明度。

您可以尝试将mouseover和mouseout函数应用于包含iframe的div

function hidefunc(){
  document.getElementById("test").style.opacity = '0';
}
function showfunc(){
  document.getElementById("test").style.opacity ="1"
}

#test{
  position:absolute;
  top:0px;
  width:300px;
  height:300px;
  background-color:#000000;
  transition: opacity .5s;
  pointer-events:none;
  z-index:2;
}
#base{
  position:absolute;
  top:0;
  z-index:0;
  height:50px;
  width:600px;
  background-color:red;
}

<div id="test">
</div>
<div onmouseover="hidefunc()" onmouseout="showfunc()" id="base">
  <a href="">Link</a>
</div>

Answer 3

iframe具有加载事件，一旦加载就会触发。
只需创建叠加层，并在iframe的onload事件触发后将其删除即可。

HTML：

<div id="background-site" class="showOverlay">
    <iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe>
</div>

CSS：

#background-site {
    position: relative;
}

#background-site.showOverlay:before {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: red;
    z-index: 2;
}

JS：

document.getElementById("backgrnd").addEventListener("load", function() {
    document.getElementById("background-site").classList.remove('showOverlay')
});

在当前代码中，您也可以使用parentElement来实现相同的结果，因为该事件会在iframe上触发：

document.getElementById("backgrnd").addEventListener("load", function(e) {
    e.target.parentElement.classList.remove('showOverlay')
});

Answer 4

嗨，我有一个可行的解决方案（请参见下文）。

不幸的是，它需要（原始）JavaScript；我希望你不要介意。我尝试了几种CSS解决方案，例如动画，但都无济于事。

无论如何，诀窍是分别在iframe和叠加层上使用单独的mouse in和mouse out事件侦听器。

document.getElementById("overlay").addEventListener("mouseover", overlayDisappear);
document.getElementById("theiframe").addEventListener("mouseout", overlayAppear);

function replaceAll(str, toFind, toReplace){
  return str.replace(new RegExp(toFind.toString(),"g"), toReplace.toString());
}

function overlayAppear(){
  //console.log("Appear", document.getElementById("overlay").className);
  document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_disappear","_appear");  
}

function overlayDisappear(){
  //console.log("Disappear", document.getElementById("overlay").className);
  document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_appear","_disappear");  
}

#theiframe, #overlay{
  width:200px;
  height:200px;
  
  position:fixed;
  top:0;
  left:0;
}

#theiframe{
  border: 2px solid black;
}

#overlay{
  background:red;
  transition:all 0.3s ease;
}

#overlay._appear{
  opacity:1;
  z-index:1;
}

#overlay._disappear{
  opacity:0;
  z-index:-1;
}

/*
#overlay:hover{
  animation-name: disappear;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes disappear{
  0%   { opacity:1; }
  50%  { opacity:0.5; }
  99%  { opacity:0; z-index:1; }
  100% { opacity:0; z-index:-1; }
}*/

<iframe id="theiframe" src="https://samleo8.github.io/web"></iframe>
<div id="overlay" class="_appear"></div>

如何在悬停时使覆盖iframe的div变浅以使iframe可点击？

4 个答案: