将鼠标悬停在帖子链接上时，我可以将后缩略图用作光标图像吗？ （WordPress的）

Question

我对javascript，php和wordpress来说太新了，以便自己解决这个问题，所以也许有人可以帮助我。

我在wordpress上制作一个投资组合页面。所有帖子标题都在sidebar.php文件的循环中。我想这样做，当你将鼠标悬停在帖子的标题上时，光标会变为帖子的精选图片/帖子缩略图。

谷歌搜索最常见的结果是简单的css版本，如下所示：

.sidebar {cursor:url('img.png') auto}

所以我有这个：

.sidebar a:hover{
    cursor:url('<?php if(has_post_thumbnail()){
    the_post_thumbnail('thumbnail');}?>') auto;
    border-bottom: 2px dashed;
    border-color: blue;

但它不起作用。当放入任何php文件时，php工作，例如sidebar.php，然后缩略图在帖子标题下。

我找到的另一个选项是javascript，它出现在这个页面上：

http://www.ajaxblender.com/howto-create-custom-image-cursors.html

#test-area {
height: 200px;
border: 3px dashed #CCCCCC;
background: #FFFFFF;
padding: 20px;
cursor: url(./blank.cur), none;
}

#mycursor {
cursor: none;
width: 97px;
height: 137px;
background: url("images/custom-cursor.jpg") no-repeat left top;
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 10000;
}

<script type="text/javascript">
$(document).ready(function(){
    $('#test-area').mouseout(function(){
        $('#mycursor').hide();
        return >false;
    });
    $('#test-area').mouseenter(function(){
        $('#mycursor').show();
        return >false;
    });
    $('#test-area').mousemove(function(e){
        $('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
    });
});
</script>

但我认为它只适用于div而不是链接？虽然像这样的东西似乎是最合乎逻辑的解决方案，但它根本无法让它工作。

然后有this page，它会在<a href>标记的中间显示一个javascript，如下所示：

<a onmousemove=\"javascript:setElementCursor(this);\" href=\"#\">Set the cursor for this link </a>

但实现一个php post_thumbnail或其中的东西对我来说已经太过分了。 （无论如何，斜杠怎么办？）

任何想法？

Answer 1

无法想象你为什么要做你想做的事，但试试这个：

IN header.php

<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'YOUR_THUMB _SIZE' );
?>

现在你的CSS 必须放在header.php中

.sidebar a:hover{
    cursor:url('<?php echo $thumb['0']; ?>') auto;
    border-bottom: 2px dashed;
    border-color: blue;
}