0

我正在尝试将一个 div 放在另一个悬停的 div 之上。但是当我用鼠标进入新的 div 时，悬停的图像消失了..

有人知道怎么修这个东西吗？顺便说一句，悬停是平局:)

我的网站是这样的：我的网站

悬停的代码是这样的：

.vierkant img{
position:absolute;
width:116px;
height:254px;
top:0px;
margin:0 auto;
margin-left:-58px;
opacity:0.91;
z-index:3;

-webkit-transition-duration: 1.2s;
-moz-transition-duration: 1.2s;
-o-transition-duration: 1.2s;
transition-duration: 1.2s;}

.vierkant img:hover{
position:absolute;
width:80%;
height:95%;
top:2%;
left:auto;
right:auto;
margin-left:-40%;
visibility:visible;
z-index:4;
opacity:1;}

我的html代码是这样的：

<div class="vierkant" align="center">
    <img src="img/knoppen/vierkant.jpg" width="90" height="93" />         
</div>
4

4 回答 4

1

我知道答案已被接受，但真的吗？使用 jQuery 或 javascript 来完成这样一个简单的任务，当它可以很容易地完成并且通常使用 CSS 完成时，就显得有点矫枉过正了。

首先，align=""不推荐使用 html 中的属性。另外，为什么要添加top, left, margin, & margin-left属性？重新定义旨在实现相同目标的属性是毫无用处的（尤其是当其中一些属性因为position不是相对而不起作用时）。

当您想在图像上显示文本时，不要使用图像。相反，使用 divbackground-image: url('yourimg.png');

我在这里用正确的代码做了一个小提琴，不再需要 javascript，更不用说 jQuery：http: //jsfiddle.net/M4UYx/

为什么这种解决方案更好？

  1. 如果您的背景只是一种颜色（如您的情况），则不需要图像
  2. 你不需要javascript（所以它更跨浏览器）
  3. 你当然不需要 jQuery
  4. 您可以放置​​文本或其他内容，而不必担心它会消失:hover

编辑：虽然不是你原来问题的一部分；要使 div 的位置居中，请为其提供以下属性：

.vierkant {
  position: absolute;
  left: 50%;
  margin: 0px -58px; /* -58px = width divided by 2 in negative */
}
于 2013-05-14T12:14:49.917 回答
0

假设它#vierkant在领带上，并且#vierkant_info是当您单击该领带时出现的 div。

当你点击#vierkant它会在 div 中滑动#vierkant_info

jQuery

 $("#vierkant").click(function(e) {

                e.preventDefault();
                $("#vierkant_info").slideDown("slow");

            });

CSS

#vierkant_info{
//your styling//
visibility:visible; // REMOVE THIS
display:none; //ADD THIS
z-index:4;
opacity:1;}

笔记：<a href="#vierkant_info" id="vierkant">click</a></div>

注意我做了div ID而不是class

于 2013-05-14T11:55:42.693 回答
0

看，我会试着向你展示它背后的逻辑。

你已经有了，CSS没有必要改变它。

JS

$(document).ready(function() {
  $("#HiddenObject").hide(); 
});

$(".vierkant").hover(
  function() {
    $("#HiddenObject").show('fast'); 
  }
  function() {
    $("#HiddenObject").hide('fast'); 
  }
);

HiddenObject您保存要显示的文本的对象在哪里。

看看这个 jsFiddle

于 2013-05-14T11:55:00.470 回答
0

我把你的代码改成了这个

.vierkant div{
position:absolute;
background-color:;
height:254px;
width:116px;
top:0;
left:50%;
margin-left:-58px;
z-index:10;

-webkit-transition-duration: 1.2s;
-moz-transition-duration: 1.2s;
-o-transition-duration: 1.2s;
transition-duration: 1.2s;}

.vierkant div:hover{
margin-left:0;
background-color:#FF6600;
height:90%;
width:90%;
top:5%;
left:5%;
z-index:10;}


.vierkant div.content{
opacity:0;
height:100%;
width:100%;
top:0%;
left:0%;
overflow:scroll;
overflow-x:hidden;}


.vierkant:hover div.content{
opacity:1;

-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;}

现在很完美！

非常感谢，因为在看到您的代码后，我们终于进入了这个！

于 2013-05-16T09:02:51.427 回答