Question

我试图找出如何让以下工作：

初次加载时，会显示右侧的初始图像内容（并且应该着色）。
将鼠标悬停在图像上方后，图像将变为彩色，并且该图像的内容将显示在右侧。
点击该内容将保留在右侧，图像将保持彩色，因为它是选定的内容。

我知道你可以让图像只是使用CSS来显示彩色图像的翻转功能，但我不知道如何使图像在点击时保持颜色以及如何使右边的内容出现，我假设可以使用Jquery或Javascript。

它看起来像什么： http://i.stack.imgur.com/73oFL.png

<ul id="testb">
    <li id="companies">
        <img src="images/linkedin.gif" width="120" height="95" alt="" />
        <img src="images/specsavers.gif" width="100" height="95" alt="" />
        <img src="images/avc.gif" width="110" height="95" alt="" />
    </li>
    <li id="testcont">content here</li></ul>

#testb{
width:950px;
margin:0 auto;
list-style:none;
padding:0;
}
#companies{
    width:440px;
    float:left;
    list-style:none;
    padding:85px 0 45px 0;
    margin:0;
    height:130px;
    display:block;
}
#testcont{
    float:left;
    width:395px;
    height:170px;
    padding:45px 0 45px 70px;
    margin:0;
    background: url(images/testglow.gif) no-repeat;
}

如果你能提供帮助，我们将非常感激。

由于

Answer 1

即使NewToJS 绝对正确，有时一些免费的源代码可能会帮助您入门：

＆＃13;

var contentValues = ["slide 1 content", "slide 2 content", "slide 3 content"];
var contentColors = ["#333333", "#777777", "#000000"];
$(function() {
    $("#companies img").on("mouseover", function()
    {
      console.log($(this).data("slide"));
      $("#testcont").html(contentValues[$(this).data("slide")]);
      $("#testcont").css("background-color",contentColors[$(this).data("slide")]);
      
    });

    $("#companies img").on("click", function()
    {
      console.log($(this).data("slide"));
      
      $("#companies img").css("background-color", "transparent")
      
      $(this).css("background-color", contentColors[$(this).data("slide")]);
      
    });


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="testb">
    <li id="companies">
        <img data-slide="0" src="images/linkedin.gif" width="120" height="95" alt="" />
        <img data-slide="1" src="images/specsavers.gif" width="100" height="95" alt="" />
        <img data-slide="2" src="images/avc.gif" width="110" height="95" alt="" />
    </li>
    <li id="testcont">content here</li>

</ul>

＆＃13;

悬停并单击图像以显示内容（显示初始内容）

1 个答案: