Question

这里我的目标是使用鼠标悬停和鼠标移动效果将标签中包含的图像替换为图像列表。我目前使用Jquery点击功能来显示和隐藏图像列表。

示例：

如果鼠标已超过img1，则会出现img2，一旦鼠标离开img1，img2就会消失，但点击img1 img2后停留在原处。我想为其他人提供相同的功能，所以我们现在可以看到img2我希望看到img4出现img2，如果鼠标进入img3然后又回来img2如果鼠标离开，则<div> <input type="radio" value="1.0" id="b"/> <label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label> <input type="radio" value="2.0" id="c"> <label for="c" ><img id="img3" src="http://lorempixel.com/10/10"></label> <input type="radio" value="3.0" id="d"/> <label for="d" ><img id="img5" src="http://lorempixel.com/10/10"></label> </div> <ul> <li> <img id="img2" src="http://lorempixel.com/10/10" style="position:absolute"> <img id="img4" src="http://lorempixel.com/10/10" style="position:absolute"> <img id="img6" src="http://lorempixel.com/10/10" style="position:absolute"> </li> </ul>。

基本上与this

的答案功能相同

HTML：

input[type="radio"] {
display: none;
}

#img1, #img3, #img5 {
width: 100px;
height:100px;
}

#img2{
bottom: 25px;
}
#img4 {
bottom: 50px;
}
#img6 {
bottom: 75px;
}

CSS：

   $("img[id='img2']").css({"display": "none"});
   $("img[id='img4']").css({"display": "none"});
   $("img[id='img6']").css({"display": "none"});

    $("#img1").click(function(){
        $("img[id='img2']").show();
        $("img[id='img4']").hide();
        $("img[id='img6']").hide();
    });

    $("img[id='img3']").click(function(){
        $("img[id='img4']").show();
        $("img[id='img2']").hide();
        $("img[id='img6']").hide();
    });

     $("img[id='img5']").click(function(){
        $("img[id='img6']").show();
        $("img[id='img2']").hide();
        $("img[id='img4']").hide();
    });

JQUERY：

<VirtualHost *:80>
    ServerName domain.org
    ServerAlias www.domain.org

    ProxyPass /blog !
    Alias /blog /var/apache-vhosts/www.domain.org-blog

    <Directory /var/apache-vhosts/www.domain.org-blog/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log

    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn
    CustomLog ${APACHE_LOG_DIR}/access.log combined


    ProxyPass / http://localhost:8884/
    ProxyPassReverse / http://localhost:8884/
    ProxyPreserveHost on
    LogLevel debug
</VirtualHost>

fiddle

Answer 1

我认为您应该使用类来跟踪状态。或者，您可以创建每个图像的对象，并添加跟踪状态的属性。我为你做了一个例子 JSFIDDLE

class ValidationServiceProvider extends ServiceProvider
{
    public function boot()
    {
        $this->app->validator->resolver(function ($translator, $data, $rules, $messages) {
            return new CustomValidator($translator, $data, $rules, $messages);
        });
    }
}

如何在输入和标签元素中创建鼠标悬停和鼠标移动效果

1 个答案: