Question

我有一个使用mouseenter＆amp;的登录屏幕mouseleave。我有一个gif图像，当鼠标悬停时它会消失，并在光标位于页面的不同部分时出现，以允许用户输入他们的ID和密码。问题是，当我键入部分密码，然后移开鼠标时，插入符号焦点就会丢失。

这是我的代码：

<div ID="contDefine" class="wipeForward" onmouseenter="fnToggleDefine1()" onmouseleave="fnToggleDefine2()">
<div ID="oDivDefine1" STYLE="position:absolute; width:454px; height:262px; background:#eff0f0 url('image/outlogin.gif') top repeat-x; ">   </div>
<div ID="oDivDefine2" STYLE="visibility:hidden; position:absolute; width:454px; height:262px; background: #eff0f0 url('image/inlogin.gif') top repeat-x; ">

function fnToggleDefine1() {
    if(agent.is_ie && !agent.is_ie10){
        contDefine.className='wipeForward';
        contDefine.filters[0].Apply();
        contDefine.filters[0].Play(duration=1);
    }
    oDivDefine2.style.visibility="visible"; 
    oDivDefine1.style.visibility="hidden";
}

function fnToggleDefine2() {
    if(agent.is_ie && !agent.is_ie10){
        contDefine.className='wipeReverse';
        contDefine.filters[0].Apply();
        contDefine.filters[0].Play(duration=1);
    }
    oDivDefine2.style.visibility="hidden"; 
    oDivDefine1.style.visibility="visible";
}

抱歉我的英语不好。感谢

编辑：如果你看到第二张图片，当我输入密码时，插入符号仍然在那里（在文本框中），但是当我将光标移到外部图像时，它将像第一张图像一样，文本框将被阻挡gif图像，当我将光标移动到图像内部时，应该像第二张图像，但是插入符号焦点就像这样消失了

更新： 由于我的网站只能在IE中使用，我试图改变我的JS功能

function fnToggleDefine2() {
    if(agent.is_ie && !agent.is_ie10){
        contDefine.className='wipeReverse';
        contDefine.filters[0].Apply();
        contDefine.filters[0].Play(duration=1);
    }
    oDivDefine2.style.opaciy="0";
    oDivDefine2.style.zIndex="-999";
    oDivDefine1.style.visibility="visible";
}

是的，我想这样，但它似乎不透明和zIndex在IE上不能很好地工作，并且尽管文本框被图像阻挡，但是出现了插入符号。

请参考此图片：

注意：如果人们不理解我的问题，请参阅下面的Shuvro评论。

Answer 1

尝试这样（我无法理解你的问题，我认为你需要这样的） {{3}}

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is example!</h2>
       <p class="zero">Happy New Year</p>
    </li>
    <li><img class="top" src="http://s9.postimg.org/z8g84vbej/happy_new_year_2016_wallpapers.jpg" alt=""/></li>
</ul>

<强> CSS

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {width:200px; height:200px;
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

Answer 2

你可以只用CSS做你想做的事。不需要JS。请查看以下代码 -

#box {
  width: 342;
  height: 160;
}

#box:hover > #imgover {
  opacity: 0;
  z-index: -999;
}

#imgover {
  width: 342;
  height: 160;
  position: absolute;
}

#input-field {
  margin: 20px 0 0 20px;
}

<div id="box">
  <img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg" id="imgover" />
  <input type="text" id="input-field" />
</div>

<强>更新

如果你真的想让JS继续在onmouseenter事件中的输入字段中使用javascript focus()方法。有关focus()访问this link的详情，请访问function fnToggleDefine1() { if(agent.is_ie && !agent.is_ie10){ contDefine.className='wipeForward'; contDefine.filters[0].Apply(); contDefine.filters[0].Play(duration=1); } oDivDefine2.style.visibility="visible"; oDivDefine1.style.visibility="hidden"; var inputField = document.getElementById("YOUR-INPUT-FIELD-ID-TO-FOCUS-ON"); inputField.focus(); }。但是以下解决方案仅适用于单个输入字段。如果您可以在jsfiddle为我创建一个小提琴，我也可以使用javascript为您提供完整的解决方案。

function hideBox(box) {
  var container = document.getElementById("input-container");
  var image = document.getElementById("imgover");
  container.style.opacity = "1";
  image.style.opacity = "0";
  image.style.zIndex = "-999";
}

function showBox(box) {
  var container = document.getElementById("input-container");
  var image = document.getElementById("imgover");
  container.style.opacity = "0";
  image.style.opacity = "1";
  image.style.zIndex = "999";
}

但对我来说，设置不透明度是正确的方法，因为有时设置可见性不会在所有导致闪烁的浏览器中起作用。

#box {
  width: 342;
  height: 160;
}

#imgover {
  width: 342;
  height: 160;
  position: absolute;
}

<div id="box" onmouseenter="hideBox(this)" onmouseleave="showBox(this)">
  <img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg" id="imgover" />
  <div id="input-container">
    <input type="text" id="input-field" />
  </div>
</div>

ImageView

保持鼠标焦点在CSS

2 个答案: