3

我希望能够将鼠标悬停在图像上调用它旁边的文本链接上的悬停属性。

我有一个视频的图像预览和旁边写的视频名称作为文本字符串。出于明显的搜索和可用性原因，我想做它，以便我可以将鼠标悬停在图片上并使文本仍然像悬停效果一样改变颜色，而不必将图像和文本都制作成一个图像；将文本保留为文本等

更新：我还想确保现在位于“span”中的文本链接不仅可以使用“margin-left”移动，而且可以提升。默认情况下，在我的代码中，它只是下降到 60x60px 图像底部的水平。我希望它更高，所以它看起来不错，但“margin-bottom”并没有帮助。我希望它在 60x60 img 的“中心高度”中......而不是在默认情况下它的底部。

有任何想法吗？谢谢！

ps我对这里发布的java脚本和jquery想法持开放态度，但我是一个完整的新手，需要额外的解释。我更喜欢CSS。

我现在的代码是：

我的html是： 

<div id="example">
  <a href="#">
    <img src="image/source_60x60px.jpg">
    <span class="video_text">Image Text</span>
  </a>
</div>

我的CSS是：

div#example         { float:left; width:358px; height:60px; margin-top:20px; }   
div#example a       { color:#B9B9B9; width:100%;}  
div#example a:hover { color:#67a; text-decoration:none;}  
span.videotext      { margin-left:80px;}
4

4 回答 4

3

关于什么

<style>
a 
{ 
    color: #000000; 
}
a:hover 
{ 
    color: #a9a9a9; 
}
</style>

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>
于 2009-09-10T11:07:00.630 回答
3

您可以使用 CSS 或 Javascript 来执行此操作。在不了解您的标记以及元素的布局方式的情况下，无法确定哪个选项是最好的。

CSS 选项

a:hover span { color:red; }
<a href="1.html">
  <img src="1.jpg" />
  <span>Title: One</span>
</a>

在该示例中，我们将文本和图像都包含在链接中。然后我们在 :hover 事件上修改文本的颜色。

Javascript (jQuery)

div.hovered p { color:red; }

<div class="preview">
  <img src="1.jpg" />
  <p>Title: One</p>
</div>

$("div.preview img").hover(
  function () { $(this).parent().addClass("hovered"); },
  function () { $(this).parent().removeClass("hovered"); }
);

此示例展示了一个解决方案，该解决方案只是将一个类添加到父容器，这反过来又修改了标题的表示。此事件是通过将图像悬停在容器内来控制的。

更新：

定位您的文本并不难。快速简便的方法是用相对定位父容器，用绝对定位文本：

<div class="container">
  <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
  </a>
</div>

div.container            { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }

这是一个简单的例子。您可以根据需要修改这些值。

于 2009-09-10T11:08:12.313 回答
0

基于乔纳森的回答，但如果你不使用 jQuery，对于 javascript：

<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
  <img src="1.jpg" />
  <p id="text1">Title: One</p>
</div>

<script type="text/javascript">
function hover(elemID, on){
  element = document.getElementById(elemID);  
  if(on){
    element.style.color='red';
  }
  else
  {
    element.style.color='black';
  }
}
</script>
于 2009-09-10T11:39:12.427 回答
0

我很抱歉。我误读了你的问题。这是另一个尝试：

HTML

<div class="video">
    <a href="" title="title">
        <img alt="title" src="path/to/image" />
        Video Title
    </a>
</div>

CSS

    .video {
        line-height: 75px;
        margin: 10px;
        padding: 10px;
        width: 200px;   
    }
    .video img {
        float: left;
        margin-right: 15px; 
    }
    .video a:hover {
        color: #hexcol; 
    }
    .video:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden; 
    }

显然，这里有一些您不需要的样式，但我用它们在浏览器中进行测试。如果您希望文本与视频缩略图垂直对齐，则需要将 line-height 属性设置为与缩略图图像相同的高度。这会将文本推到视频的中间。

于 2009-09-11T01:59:19.743 回答