悬停和点击图片显示内容（与初始显示的内容）

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

我知道你可以只让图像简单地使用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; 
}

如果你能帮忙将非常感激。

感谢

来源

2015-04-12 xichil

你尝试过这么远吗？请显示你这样做的尝试。我没有看到任何**悬停状态在您的CSS或JavaScript事件/功能，所以目前还不清楚问题是什么。如果你期望人们只是让愿望清单发生，那么你就错了。堆栈溢出是开发人员调试源代码，找到问题，解释问题并提供解决方案（如果可能的话），**不是**用于发布请求并希望获得免费源代码的站点。 – NewToJS

即使寿NewToJS是绝对正确，有时有点免费的源代码可能会帮助你开始：

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")]); 
 
     
 
    }); 
 

 

 
});

<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>

来源

2015-04-12 16:24:36 RobertoNovelo

非常感谢，我不打算粗鲁，只是希望代码能够为我提供，更多的是指向正确的方向！我忘了提及这一点，因为我完全不知道任何Javascript，并且在大约6年的时间里几乎没有做过任何编码。我已经尝试了你的建议，但是我似乎不明白为什么它不在我的文档中工作 - 但它是在提供的代码段中，并且当我使用jsfiddle集成我的代码时。 – xichil

没问题的人！有时候一些代码很适合开始移动。你包括jQuery吗？这也应该包装在一个$（function（）{ }）;看看我编辑过的编辑 – RobertoNovelo

我编辑了我的评论，你已经评论了我编辑的时间，所以不确定你是否会阅读我的其他消息，以帮助我多出一点点！ https://jsfiddle.net/xowkc9fg/ - 在jsfiddle上它完美的工作，但是当我把它放到html文档中不起作用？悬停或点击图片时，没有任何变化。 – xichil

悬停和点击图片显示内容（与初始显示的内容）

回答

相关问题