Question

处构建网站

将鼠标悬停在图像上时，您会看到3个操作。如何删除这些内容，而只是在用户悬停时显示页面标题（标题当前位于图像正下方）

*这是一个wordpress网站。

谢谢！

Answer 1

如果你看到每个容器的html，它的形式为：

<div class="img-container">
     <a href="http://nelsonkeating.com/whitney-danielle/"><img width="310" height="315" src="http://nelsonkeating.com/wp-content/uploads/2012/01/DW3-310x315.jpg" class="attachment-post-thumbnail wp-post-image" alt="D&amp;W3" title="D&amp;W3" /></a>

     <div class="actions">


                         <a href="http://nelsonkeating.com/wp-content/uploads/2012/01/DW3.jpg" rel="gallery" title="Whitney &#038; Danielle" class="view">Enlarge</a>



                         <a class="share">Share</a>   

                                                        <a href="http://nelsonkeating.com/whitney-danielle/#comments" class="comment"><span>0</span> Comment</a> 

                                                       <div class="share-container">
                            <div class="share-icons">
                                                                    <a href="javascript: void(0)" class="twitter-share iframe" onClick="twitPop('http://nelsonkeating.com/whitney-danielle/', 'Whitney &#038; Danielle - ', 'sawyerh:Best Designer Alive')">
                                Twitter</a>

                                <a href="http://www.facebook.com/sharer.php?u=http://nelsonkeating.com/whitney-danielle/&amp;t=Whitney &#038; Danielle" class="facebook-share" target="_blank">

                                Facebook</a>

                                <a href="http://www.stumbleupon.com/submit?url=http://nelsonkeating.com/whitney-danielle/&amp;title=Whitney &#038; Danielle" class="stumble-share" target="_blank">
                                StumbleUpon</a>

                                <a href="http://technorati.com/cosmos/search.html?url=http://nelsonkeating.com/whitney-danielle/" class="tech-share" target="_blank">
                                Technorati</a>

                                <a href="http://digg.com/submit?phase=2&amp;url=http://nelsonkeating.com/whitney-danielle/&amp;title=Whitney &#038; Danielle" class="digg-share" target="_blank">
                                Digg</a>


                                <a href="http://del.icio.us/post?url=http://nelsonkeating.com/whitney-danielle/&amp;title=Whitney &#038; Danielle" class="delicious-share" target="_blank">
                                Delicious</a>

                                <a href="mailto:EMAIL?body=http://nelsonkeating.com/whitney-danielle/" class="email-share" target="_blank">
                                Email</a>
                            </div>
                         </div><!-- #share-container -->        
                    </div><!-- #actions --> 
                    <div class="clearfix"></div>
                </div><!-- #img-container -->

在不知道脚本是如何正常工作的情况下，我建议您修改hover时显示的actions类内的内容

Answer 2

输出的HTML看起来像这样（在大量输出清理之后）：

<div class="img-container">
    <a href="http://nelsonkeating.com/why-were-here/"><img width="310" height="206" src="http://nelsonkeating.com/wp-content/uploads/2012/01/whit-and-me-park-310x206.png" class="attachment-post-thumbnail wp-post-image" alt="whit and me park" title="whit and me park" /></a>
    <div class="actions">                           
        <a href="http://nelsonkeating.com/wp-content/uploads/2012/01/whit-and-me-park.png" rel="gallery" title="What We Do" class="view">Enlarge</a>
        <a class="share">Share</a>
        <a href="http://nelsonkeating.com/why-were-here/#comments" class="comment"><span>0</span> Comment</a>
        <div class="share-container">
            <div class="share-icons">
                <a href="javascript: void(0)" class="twitter-share iframe" onClick="twitPop('http://nelsonkeating.com/why-were-here/', 'What We Do - ', 'sawyerh:Best Designer Alive')">Twitter</a>
                <a href="http://www.facebook.com/sharer.php?u=http://nelsonkeating.com/why-were-here/&amp;t=What We Do" class="facebook-share" target="_blank">Facebook</a>
                <a href="http://www.stumbleupon.com/submit?url=http://nelsonkeating.com/why-were-here/&amp;title=What We Do" class="stumble-share" target="_blank">StumbleUpon</a>
                <a href="http://technorati.com/cosmos/search.html?url=http://nelsonkeating.com/why-were-here/" class="tech-share" target="_blank">Technorati</a>
                <a href="http://digg.com/submit?phase=2&amp;url=http://nelsonkeating.com/why-were-here/&amp;title=What We Do" class="digg-share" target="_blank">Digg</a>
                <a href="http://del.icio.us/post?url=http://nelsonkeating.com/why-were-here/&amp;title=What We Do" class="delicious-share" target="_blank">Delicious</a>
                <a href="mailto:EMAIL?body=http://nelsonkeating.com/why-were-here/" class="email-share" target="_blank">Email</a>
            </div>
        </div><!-- #share-container -->        
    </div><!-- #actions --> 
    <div class="clearfix"></div>
</div><!-- #img-container -->
<h2><a href="http://nelsonkeating.com/why-were-here/" title="What We Do" rel="bookmark">What We Do</a></h2>

所以，这里有几点需要注意。 actions div看起来就像是悬停时显示的那个。 <h2>是您要展示的内容。所以，要做的就是将<h2>代放在actions div中并注释掉（或删除）该代码。

更好的解决方案是，除此之外，深入研究jQuery并确保在悬停时不会破坏任何代码。此外，由于我只能猜测这是一个主题，因此可能会出现一些问题。主题通常非常紧密（至少在我的经验中）并且改变某些东西会产生级联效应。

PHP悬停动作

2 个答案: