mostrare mouseover

**giog86** · 31-05-2017, 10:17

Buongiorno,
è da pochissimo che studio html,csse jquery. Sto provando a realizzare un sito imparando nel frattempo.
Ho creato una tabella con due colonne. In una ci sono delle immagini, nell'altra la descrizione dell'immagine.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="LINK_STYLE.css" type="text/css" />
<link rel="stylesheet" href="CALENDARIO_DIV.css" type="text/css" />
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.9.2.custom.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type = "text/javascript" src = "js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="js/link.js"></script>
<script type="text/javascript" src="js/link2.js"></script>
<script type="text/javascript" src="js/table.js"></script>

</head>
<body>
<div class="fader"></div>
<header>

<button id="bottone">MENU</button>

<ul id="ul_nav">
<button id="bottone_ul">X</button>
<li id="li_nav"><a href="">...</a>
<li id="li_nav"><a href="" >...</a>
<li id="li_nav"><a href="" >....</a>
<li id="li_nav"><a href="" >....</a>
</ul>

</header>

<div id="div_table">

<table style="width:100%">
<tr>
<td><img src="" style="height:70px; width:70px;">proprieta</td>
<td >some text</td>
</tr>
<tr>
<td><img src="" style="height:70px; width:70px;">proprieta2</td>
<td>some text</td>
</tr>

</table>

</div>

</body>

Inizialmente l'elemento accanto alle immagini è nascosto (lo nascondo tramite jquery). Avrei bisogno di una funzione che al passaggio del mouse sulle immagini visualizzi il e quando il mouse si allontana lo rinasconda.
Guardando su internet ho trovato del codice ed ho provato a riadattarlo in base alle mie esigenze ma non funziona.
Qualcuno può darmi una mano?

Posto codice:

JQUERY

Ho usato "this" perchè ho bisogno che quando vado su una determinata immagine mi visualizzi il relativo a quell'immagine (spero di non dire cavolate!!!)
$(document).ready(function() {
$("p").hide();

$("img").mouseover(function () {
$(this,"p").show();
});

$("img").mouseout(function () {
$(this,"p").hide();
});

});

**lucavizzi** · 31-05-2017, 13:45

codice:

$('img').mouseover(function(){
    //La cella che contiene l'immagine e il paragrafo.
    var td_object=$(this).parents('td');

    //Il paragrafo all'interno della cella
    $('p',td_object).show();
});

**lucavizzi** · 31-05-2017, 13:48

Usa il tag [code] quando posti del codice, consulta il regolamento di questa sezione per questa ed altre regolette che dovresti seguire.
Buon prosieguo

**giog86** · 31-05-2017, 22:14

Grazie mille. Funziona perfettamente. Approfondirï¿½ i concetti di DOM e Traversing. E naturalmente leggerï¿½ il regolamento in maniera esaustiva.

**abele2017** · 01-06-2017, 05:51

Usa il tag [code] quando posti del codice

Discussione: mostrare <p> mouseover

Strumenti discussione

Ricerca discussione

Visualizza

mostrare <p> mouseover

Tag per questa discussione

Permessi di invio