0

在下面的示例中，我需要显示，当鼠标悬停在图像或文本上时，图像和文本会悬停。我已经完成了第一个产品的开发，但我也需要它来开发其他产品。我如何实现这一目标？

悬停应该是单独的，而不是为每个元素提供单独的 id。

这是示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <link rel="stylesheet" href="Slider.css">
    <link rel="stylesheet" href="a.css">
        <script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.0-packed.js"></script>
        <script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
        <script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
        <script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>

        <script type="text/javascript" language="javascript">
            $(function() {

                //  Basic carousel, no options
                $('#foo0').carouFredSel();

                //  Basic carousel + timer, using CSS-transitions
                $('#foo1').carouFredSel({
                    auto: {
                        pauseOnHover: 'resume',
                        progress: '#timer1'
                    }
                }, {
                    transition: true
                });

                //  Scrolled by user interaction
                $('#foo2').carouFredSel({
                    auto: false,
                    prev: '#prev2',
                    next: '#next2',
                    pagination: "#pager2",
                    mousewheel: true,
                    swipe: {
                        onMouse: true,
                        onTouch: true
                    }
                });

                //  Variable number of visible items with variable sizes
                $('#foo3').carouFredSel({
                    width: 360,
                    height: 'auto',
                    prev: '#prev3',
                    next: '#next3',
                    auto: false
                });

                //  Responsive layout, resizing the items
                $('#foo4').carouFredSel({
                    responsive: true,
                    width: '100%',
                    scroll: 2,
                    items: {
                        width: 400,
                    //  height: '30%',  //  optionally resize item-height
                        visible: {
                            min: 2,
                            max: 6
                        }
                    }
                });

                //  Fuild layout, centering the items
                $('#foo5').carouFredSel({
                    width: '100%',
                    scroll: 2
                });

            });
        </script>
<script language="javascript">
function hightlight() 
{

    document.getElementById("textspan").style.color = "blue";
    document.getElementById("ul").style.border = "1.5px solid black";
    //document.getElementById("textspan").setStyle("color","blue");
    //document.getElementById("ul").setStyle("border","1px solid blue");
}
function removehightlight() 
{
    document.getElementById("textspan").style.color = "black";
    document.getElementById("ul").style.border = "1px solid #999";
}
</script>

<style type="text/css">
<!--
.style3 {color: #000000}
-->
</style>
</head>
    <body>

                <table id="Main" >
  <tr>
<td class="tb 1 clearfix"><a id="prev2" class="button" href="a.css"></a></td>

<td id="tb2" class="list_carousel">
                <div id="foo2">
                    <table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Laptop.JPG" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
                    </tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr>
  <td>&nbsp;</td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Handbags1.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
                    </tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr>
  <td>&nbsp;</td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Wafflemaker.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
                    </tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr>
  <td>&nbsp;</td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/camera.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
                    </tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr>
  <td>&nbsp;</td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Laptop.JPG" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
                    </tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr>
  <td>&nbsp;</td>
</tr></table>
                </div></td>
<td id="tb3" class="clearfix"><a id="next2" class="button" href="a.css"></a></td>
  </tr>
</table>

        <br />
    </body>
</html>
4

1 回答 1

0

只是一个建议...尝试将图像放在超链接a标签内。然后，您可以为链接设置一些 CSS 类名称，class="imageLink"例如 '。

之后，如果您为链接和图像编写悬停效果，则在该类中，您可以过滤掉该类中的图像。这是示例...

.imageLink a:hover
{
   ... link hover effect ...
}
.imageLink img:hover
{
   ... image hover effect ....
}

我对此并不完全确定。但是，我在其他地方用这种技术也达到了类似的效果。

于 2013-02-25T07:21:00.890 回答