0

终于弄清楚了结果，同时使用了js和css来工作，谢谢大家:) FINAL JSFIDDLE CODE

在下面找到代码

我做了一个使用其他代码的例子，'info <DIV>'当鼠标悬停在图像上时显示出来，但是当我尝试"caption <DIV>"在图像上显示时我遇到了问题。我试图在 css 中添加代码，但我所做的任何事情都会停止"info <DIV>"显示:(

有人可以看看这组代码吗：jsfiddle

如果"info <DIV>"可以单独显示，<div>那将有很大帮助。感谢和问候。

代码html

<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/>

<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div>

<div class="caption">SYMBOL</div> 

<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/>

<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>

<div class="caption">STAR</div>
​

CSS 代码

.team , .info{
 background: #151515;
 height: 150px;
 width: 150px; 

}
.info{

    background:white;
    height: 50%;
    width: 20%;
    display:none;
position: absolute; 
    top: 10px;
    right: 10px;
}


.team:hover + .info {

   display:block; }


.team {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .team:hover {
      opacity: 0.5;
      }​
4

3 回答 3

1

CSS 的能力令人难以置信——但不要过度滥用它。我见过一些非常漂亮的小部件和模板完全用 CSS 完成（这很棒），但我建议在“破解”CSS 与使用 javascript 时要小心。恕我直言，这是一个 css hack：

.team:hover + .info {
  display:block;
}

可以使用 CSS 更改嵌套在该元素中的元素的样式/显示，例如：

<div>
  <a class="close" href="#">Close me</a>
</div>

当您将鼠标悬停在上面时<div，a.close应该会出现（显示：块；）。

在您的特定情况下 - 您正在使用 css 更改非嵌套元素的显示。建议使用 javascript 而不是 css hack，因为如果您曾经（并且很可能会）想让用户将鼠标从图片上移开并将鼠标悬停在标题 div 上并突出显示文本，请单击链接...等. 你将不得不使用javascript。CSS 的功能是有限的，当您使用超越其预期目的时，它的复杂性会大大增加。

因此，我推荐 javascript（w/jquery 或其他库）。

于 2012-12-28T11:57:05.830 回答
0

我在 CSS 中添加了标题类并设置了标题样式。在您的代码中，标题将保留在图像下方。然后我设置position:relative并设置距离底部20px的位置。我给它一个background-color:red，以便让您看到它的位置。我还给标题设置了 150 像素的宽度作为图像的宽度。您使用了team类info和caption。为了在每张图片中分别定位鼠标悬停功能，我为每张图片创建了 2 种不同类型的类，所以：team1, team2, info1, info2, caption1, caption2. 如果您想在网页上使用 3 张图片，则必须在 html、css 和 jquery 函数中添加team3、info3等。caption3（您可以复制和粘贴并重命名）。我添加了一个带有 id 的父 divimage包装每个图像并提供相对定位。您可以根据需要编辑代码。

这是编辑后的 ​​HTML：

<div id="image">
 <img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-  Critical-icon.png" class="team1"/>

<div class="info1">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"    <BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"    <BR>"this is a symbol"<BR></div>

<div class="caption1">SYMBOL</div> 
</div>
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-    Favourite-1-icon.png" alt="" class="team2"/>

<div class="info2">and this is a star<BR>and this is a star<BR>and this is a    star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>

<div class="caption2">STAR</div>
</div>​

​</p>

这是编辑后的 ​​CSS：

.team1 {
 background: #151515;
 height: 150px;
 width: 150px;
 opacity: 1;
 transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;

}

.info1{
background: white;
 height: 150px;
 width: 150px;
 visibility:hidden;
 position: absolute; 
 top: 10px;
 right: 10px;
}

.team2{
 background: #151515;
 height: 150px;
 width: 150px;
 opacity: 1;
 transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;    

}

.info2 {
background: white;
 height: 150px;
 width: 150px;
 visibility:hidden;
 position: absolute; 
 top: 10px;
 right: 10px;
}

.team1:hover {
      opacity: 0.5;
}

.team2:hover {
      opacity: 0.5;
}

.caption1  {
position:relative;
    background-color:red;
    width:150px;
    bottom:20px;
    visibility:hidden;
}

.caption2  {
position:relative;
    background-color:red;
    width:150px;
    bottom:20px;
    visibility:hidden;
}

#image {
position:relative;
}

​</p>

然后我添加了一些 jquery 函数，您可以在其他 html 代码之后将它们放在 html 页面的正文中：

$(".team1").mouseout(function () {
    $(".caption1").css("visibility","hidden");
 $(".info1").css("visibility","hidden");   

  });


$(".team1").mouseover(function () {
    $(".caption1").css("visibility","visible");
$(".info1").css("visibility","visible");
});

$(".team2").mouseout(function () {
    $(".caption2").css("visibility","hidden");
$(".info2").css("visibility","hidden");
  });


$(".team2").mouseover(function () {
    $(".caption2").css("visibility","visible");
$(".info2").css("visibility","visible");
  });

为了使用 jquery 函数，你必须在你的页面中包含 jquery 库，方法是在<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>你的 HTML 页面的头部插入：

<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>

这是关于jsfiddle的演示

于 2012-12-28T12:01:02.173 回答
0

最终代码

html

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>



  <style type='text/css'>

      .team img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;

}
.team .caption {
    position: absolute;
    bottom: 1px;
    right: 0px;
    width: 100%;
    height: 25%;
    display: none;
    z-index: 2;
    text-align: right;
    color: #ffffff;
    padding: 10px;
    background: rgba(0, 0, 0, .75);

}

.team .caption a {
    color: #ffffff;
}
  </style>




<body>
  <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.team').mouseover(function() {
    $(this).find('.caption').fadeIn(100);
});

$('.team').mouseleave(function() {
    $(this).find('.caption').fadeOut(100);
});
});//]]>  

</script>
      <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.team').hover(function() {
    $(this).find('.info').fadeIn(100);
});

$('.team').mouseleave(function() {
    $(this).find('.info').fadeOut(100);
});
});//]]>  

</script>

<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" >

<div class="caption">SYMBOL</div>

<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div></div>

<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png">

<div class="caption">STAR</div>

<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div></div>

</body>​

css

.team {
 background: #151515;
 height: 150px;
 width: 150px; 
    position: relative;

}
.info{
    background:white;
    height: 100%;
    width: 100%;
    display:none;
position:fixed;
    float:right;
    top: 0px;
    left: 70% ;
    z-index: 99;
}
于 2012-12-28T19:53:57.157 回答