Changement div du contenu sur la base de la souris hover sur les différents divs

Salut cette question est une sorte de bâtiment de cette question précédente survol des modifications de texte à l'intérieur de séparer DIV demandé par quelqu'un d'autre.

Seulement, je crois que l'affiche originale a été demandé pour plusieurs plane et personne ne semblait comprendre la demande.. je crois que je suis à la recherche de ce qu'il cherchait donc je vais essayer de l'expliquer le mieux que je peux.

dire que j'ai un div

<div id="content">Descriptions should appear here</div>

et une liste de liens positionnés n'importe où sur la page, avec ses propres descriptions (uniquement la liste est visible pas les descriptions)

foo = bar and stuff
apples = a red fruit
keyboard = thing you type with
boat = floats on water

Comment pourrais-je faire en sorte que si quelqu'un se penchait sur l'un des liens, la description serait alors montré dans le contenu de la div?

Merci pour toutes les réponses! En fin de compte, c'est ce que je suis allé avec:

javascript:

<script>
    function changeContent(description) {
        console.log(description);
        var MyDesc = document.getElementById(description);
        document.getElementById('content').innerHTML = MyDesc.value;
    }
</script>

html:

<div id="content"></div>

<a onmouseover="changeContent('desc1')" href="#">Apples</a>
  <input type="hidden" id="desc1" value="apples are delicious">
<a onmouseover="changeContent('desc2')" href="#">Oranges</a>
  <input type="hidden" id="desc2" value="Oranges are healthy">
<a onmouseover="changeContent('desc3')" href="#">Candy</a>
  <input type="hidden" id="desc3" value="Candy is tasty!">

avoir une entrée séparée pour la description me laisse l'option de film autour de en cas de besoin. Merci encore pour toutes les réponses grands!

InformationsquelleAutor Dal | 2015-01-22

cette solution utilise javascript.

HTML:

<div id="content">
    Stuff should be placed here.
</div>

<br/>
<br/>
<br/>
<ul>
    <li onmouseover="hover('Apples are delicious')">Apple</li>
    <li onmouseover="hover('oranges are healthy')">Orange</li>
    <li onmouseover="hover('Candy is the best')">Candy</li>
</ul>

<script>
    function hover(description) {
        console.log(description);
        document.getElementById('content').innerHTML = description;
    }
</script>

C'est parfait, je peux manipuler assez facilement pour mes liens. Merci beaucoup soo!
vous êtes les bienvenus! gl sur votre projet

InformationsquelleAutor indubitablee

Je vais vous donner la plus simple des réponses et un exemple pour montrer à quel point c'est facile:

Bootply

Html:

<div id="content">
  This is some cool default content!
</div>

<div id="foo">Bar and stuff</div>
<div id="apples">A red fruit</div>
<div id="keyboard">Thing you type with</div>
<div id="boat">Floats on water</div>

Javascript:

$("#foo, #apples, #keyboard, #boat").hover(function(e){
  $("#content").text($(this).text());
});

Il y a beaucoup plus que vous devez faire pour rendre ce viable/utilisable de la page web, mais cela va vous diriger dans la bonne direction.

Espère que ça aide.

InformationsquelleAutor Tim Lewis

0

Vous aurez envie d'utiliser l'Événement onmouseover

http://www.w3schools.com/jsref/event_onmouseover.asp

Et puis, avez vous un script pour changer le style de "contenu" à l'affichage en ligne, et ensuite de retour à aucun quand ils quittent le hover avec onmouseout

InformationsquelleAutor Dan
0

Vous pouvez utiliser jQuery et enregistrer un hover événement pour chaque ligne dans votre liste. Dans le cas de la fonction vous serez en mesure d'accéder au contenu de la planait la balise avec le $(this).text();

InformationsquelleAutor Sebastian Kaupper
0

Vous êtes à la recherche pour cette http://jsfiddle.net/abhiklpm/v6ay0yy6/
Dans mon exemple sur mouseout, il affiche le vieux div contenu aussi, vous pouvez supprimer cette partie si nécessaire. Aussi au lieu de hover vous pouvez utiliser jquery événements comme mouseenter, mouseover etc

InformationsquelleAutor abhiklpm

HTML

<ul>
    <li class="clickable" data-desc="bar and stuff">Fo</li>
    <li class="clickable" data-desc="a red fruit">apples</li>
    <li class="clickable" data-desc="thing you type with">keyboard</li>
    <li class="clickable" data-desc="floats on water">boat</li>
</ul>
<div id="content">Descriptions should appear here</div>

Javascript(jQuery Requis)

$('.clickable').on('click', function () {
    desc = $(this).attr('data-desc'); //get the description
    $('#content').text(desc);
});

violon ici http://jsfiddle.net/jcw6v7Le/

InformationsquelleAutor Sherif

Vous devez vous connecter pour publier un commentaire.