0

我现在设置页面的方式非常可靠。我有一个图片库，当您的鼠标悬停在其中一个小图标上时，会弹出一个较大的图标，并且页面上最大的图像会变为该图像。我通过内联 CSS 使用 onMouseOver 和 onMouseOff 事件完成了这一切。

但是，我想对文本框做同样的事情。比如说，当我将鼠标悬停在狗的图片上时，我希望页面底部附近名为“dogdiv”的 div 中的文本出现在 id 为 textarea 的文本框中。我知道如何使用 JavaScript (JS) 来做到这一点，但由于我们使用的服务器受到限制，这不再是一种选择。它必须是直接的 CSS。

我知道这是可能的，但我似乎无法找出方法。你们中的任何人都可以告诉我我需要做什么才能完成这项工作吗？

<html> 
<head>
<title>Text/Photo Swap Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {background: url('gradient.png');}

#gallery {position: relative; }
#gallery ul {list-style-type: none;
    width: 300px; }
#gallery li { display: inline; 
     float: left;
     padding: 5px; }
#gallery img {border-style: solid: 10px; border-color: #333; }
#gallery a { text-decoration: none;
             font-style: none;  
             color: #333; }

#mainPicture {
    float: right;
        }

.popOut
{
    cursor: default;
    list-style: none;
}
.popOut a
{
    cursor: default;
}
.popOut a .preview
{
    display: none;
}
.popOut a:hover .preview
{
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
}
.popOut img
{
    background: #ebf0f3;
    border-color: #ebf0f3;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    vertical-align: top;
    width: 100px;
    height: 75px;
}
.popOut li
{
    background: #ebf0f3;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 2px;
    position: relative;
}
.popOut .preview
{
    border-color: #000;
    width: 200px;
    height: 150px;
}
.popOut p
{
    text-align: center;
}

#textarea
{
    background-color: #ebf0f3;
}

div.hideText
{
display:none;
}


</style>
</head>

<body>
<div class="mainPicture"><img id="awesome" src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/awesome.png" height="300" width="400" alt="" name="Awesome2"><!--style="position:relative; left:600px; top:326px;"--></div>

<td width="1000" rowdiv="3">
<div id="gallery">
    <ul class="popOut">
        <li>
            <a href="" onMouseOver="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/dog.jpg';" onMouseOut="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/dog.jpg';">
                <img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/dog.jpg" width="100" height="75" alt="dog"><img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/dog.jpg" width="100" height="75" alt="dog" class="preview"> 
            </a>
        </li>
        <li>
            <a href="" onMouseOver="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/cat.jpg';" onMouseOut="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/cat.jpg';">
                <img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/cat.jpg" width="100" height="75" alt="cat"><img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/cat.jpg" width="100" height="75" alt="cat" class="preview"> 
            </a>
        </li>
        <li>
            <a href="" onMouseOver="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/parrot.jpg';" onMouseOut="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/parrot.jpg';">
                <img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/parrot.jpg" width="100" height="75" alt="parrot"><img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/parrot.jpg" width="100" height="75" alt="parrot" class="preview"> 
            </a>
        </li>
        <li>
            <a href="" onMouseOver="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/lizard.jpg';" onMouseOut="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/lizard.jpg';">
                <img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/lizard.jpg" width="100" height="75" alt="lizard"><img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/lizard.jpg" width="100" height="75" alt="lizard" class="preview"> 
            </a>
        </li>
        <li>
            <a href="" onMouseOver="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/horse.jpg';" onMouseOut="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/horse.jpg';">
                <img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/horse.jpg" width="100" height="75" alt="horse"><img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/horse.jpg" width="100" height="75" alt="horse" class="preview"> 
            </a>
        </li>
        <li>
            <a href="" onMouseOver="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/chicken.jpg';" onMouseOut="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/chicken.jpg';">
                <img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/chicken.jpg" width="100" height="75" alt="chicken"><img src="http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/chicken.jpg" width="100" height="75" alt="chicken" class="preview"> 
            </a>
        </li>
        <li onMouseOver="textarea.textarea2='chickendiv'">
            <a href="" onMouseOver="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/awesome.png';" onMouseOut="document.Awesome2.src='http://ctd-dev.jdc.ao.dcn/sites/ctd-dev.jdc.ao.dcn/files/pictures/awesome.png';">
                <p>Default Image</p>
            </a>
        </li>
    </ul>

    <div id="textarea" style="height:600px;width:320px;font:14px;font:14px/26px Arial, Helvetica, sans-serif;overflow:scroll; position:relative;
    top:12px;"><div id="textarea2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pulvinar lectus non lectus auctor egestas. Donec at nunc neque. Morbi ornare condimentum lobortis. Nam vehicula urna ac mauris pharetra rutrum. Duis et arcu eget sapien interdum porttitor ut et tortor. Maecenas ultricies dignissim pretium. Integer quis enim metus. Sed enim lacus, eleifend eu euismod volutpat, blandit eu sem. Vestibulum varius purus ut est accumsan pellentesque. Donec quis enim id lectus sollicitudin suscipit at volutpat augue. Curabitur et metus purus. Fusce luctus nunc vitae sapien pharetra id accumsan lectus malesuada.</p></div>
    </div>
    </div>
</td>

<div id="dogdiv" class="hideText"><p>The domestic dog (Canis lupus familiaris), is a subspecies of the gray wolf (Canis lupus), a member of the Canidae family of the mammilian order Carnivora. The term domestic dog is generally used for both domesticated and feral varieties. The dog may have been the first animal to be domesticated, and has been the most widely kept working, hunting, and companion animal in human history. The word dog may also mean the male of a canine species, as opposed to the word bitch for the female of the species.</p>
</div>
<div id="catdiv" class="hideText"><p>The domestic cat (Felis catus or Felis silvestris catus) is a small, usually furry, domesticated, carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines. Cats are valued by humans for companionship and ability to hunt vermin and household pests. They are primarily nocturnal.</p>
</div>
<div id="parrotdiv" class="hideText"><p>Parrots, also known as psittacines are birds of the roughly 372 species in 86 genera that make up the order Psittaciformes, found in most tropical and subtropical regions. The order is subdivided into three superfamilies: the Psittacoidea  parrots), the Cacatuoidea (cockatoos) and the Strigopoidea (New Zealand parrots). Parrots have a generally pantropical distribution with several species inhabiting temperate regions in the Southern Hemisphere as well. The greatest diversity of parrots is found in South America and Australasia.</p>
</div>
<div id="lizarddiv" class="hideText"><p>Lizards are a widespread group of squamate reptiles, with more than 5600 species , ranging across all continents except Antarctica as well as most oceanic island chains. The group, traditionally recognized as the suborder Lacertilia, is defined as all extant members of the Lepidosauria (reptiles with overlapping scales), which are neither sphenodonts (i.e., tuatara) nor snakes ? they form an evolutionary grade. While the snakes are recognized as falling phylogenetically within the Toxicofera clade from which they evolved, the Sphenodonts are the sister group to the Squamates, the larger monophyletic group, which includes both the lizards and the snakes.</p>
</div>
<div id="horsediv" class="hideText"><p>The horse (Equus ferus caballus) is one of two extant subspecies of Equus ferus, or the wild horse. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature into the large, single-toed animal of today. Humans began to domesticate horses around 4000 BC, and their domestication is believed to have been widespread by 3000 BC. Horses in the subspecies caballus are domesticated, although some domesticated populations live in the wild as feral horses. These feral populations are not true wild horses, as this term is used to describe horses that have never been domesticated, such as the endangered Przewalski Horse, a separate subspecies, and the only remaining true wild horse. There is an extensive, specialized vocabulary used to describe equine-related concepts, covering everything from anatomy to life stages, size, colors, markings, breeds, locomotion, and behavior.</p>
</div>
<div id="chickendiv" class="hideText"><p>The chicken (Gallus gallus domesticus) is a domesticated fowl, a subspecies of the Red Junglefowl. As one of the most common and widespread domestic animals, and with a population of more than 24 billion in 2003, there are more chickens in the world than any other species of bird. Humans keep chickens primarily as a source of food, consuming both their meat and their eggs.</p>
</div>
</body>
</html>
4

2 回答 2

1

将其粘贴在您的文档准备功能中

$("img").bind("mouseover", function(){
   var key = $(this).attr("alt");
   $("#textarea").text($("#" + key + "div").text());
}).bind("mouseout",function(){
   $("#textarea").text("");
});

这会将事件处理程序附加到页面上的每个图像： $("#popOut>img") 只会标记弹出列表中的图像。

好的，所以要解决必须做得不好的额外限制：

查询：

<img … 
    onmouseover='$("#textarea").text($("#" + $(this).attr("alt") + "div").text());'
    onmouseout='$("#textarea").text("");'
>

DOM：

<img … 
    onmouseover='document.getElementById("textarea").innerText = document.getElementById( this.alt + "div").innerText;'
    onmouseout='document.getElementById("textarea").innerText = "";'
>
于 2012-05-14T18:54:25.000 回答
1

这就是你需要的

<ul id="thumbs">

  <li>
    <div class="large-thumb"><img src="large-thumb.jpg" /></div>
    <div class="small-thumb"><img src="small-thumb.jpg /></div>
  </li>

  <li>
    <div class="large-thumb"><img src="large-thumb.jpg" /></div>
    <div class="small-thumb"><img src="small-thumb.jpg /></div>
  </li>

</ul>

使用 CSS 您想应用于display: none;该类，.large-thumb请参阅下面的 css：

#thumbs {
  float: left;
  width: 100%;
  padding: 20px 0;}

#thumbs li {
  float: left;
  display: inline;
  margin-right: 10px;}

#thumbs li .large-thumb { display: none; /*Hide the large thumb*/}

#thumbs li:hover .large-thumb { display: block; /*Show on Hover*/}

我将剩下的 CSS 留给你做，但你需要li相对定位，然后绝对定位大拇指以实现你想要做的事情。

希望这可以帮助 ：-）

于 2012-05-14T16:53:05.447 回答