javascript - 你如何在div点击上执行悬停样式/你如何使用js设置高级样式？

标签 javascript jquery html css angularjs

框架 AngularJS 地铁 查询 Bootstrap

问题 #1 现在我有一个平铺的 DIV 设计，当您的鼠标悬停在平铺上时，平铺会展开。相反，我希望动画展开在点击时保持展开状态，直到切换点击。这样一来，运动就更容易预测，也更容易从我目前拥有的东西中导航。

http://snomada.com/angular_test/

问题 #2 我有重复的 div 标签，使用 metro css 有一种方法可以为图 block 设置动画。但是，我想将此样式作为要重复的元素的 AngularJS 值传递。这样用户就可以在发布帖子时选择动画，它会使用 Angular 中动态变量的注入(inject)样式将动画样式应用到该帖子，如果我将变量传递到标签中它会起作用但是这将使我的每个图 block 动画化只想使用 style=""为所选的动画制作动画，但我不知道如何将其正确放入这些标签中，或者我不知道我在做什么。我将在下面粘贴我的整个代码以查看它的实际效果，只需转到我在此处放置的网址即可。 

#HTML Example of #2
<div class="tile" style="background-image: url('{{userpost.image}}');{{userpost.animated}}" >

#Javascript for #2
    var user_post = [
    { 
    title: 'test1',
    message: 'this is a  post', 
    hide:false,
    image: 'images/pic02.jpg',
    animated:'.active-tile>.tile{-webkit-transform: translate(0px,-100%);-moz-transform: translate(0px,-100%);-o-transform: translate(0px,-100%);transform: translate(0px,-100%);}'
    },

CSS for #2
    .active-tile > .tile{
      -webkit-transform: translate(0px,-100%);
      -moz-transform: translate(0px,-100%);
      -o-transform: translate(0px,-100%);
      transform: translate(0px,-100%);
    }

这只是为了向您展示我要插入的内容的非缩小版本。

#CSS

body{
    background: url(../images/banner.jpg);
    background-size: 2000px 2000px;
    background-repeat: no-repeat;
}

#content{
    top:55px;
    position:absolute;
    margin:0px;
    left:7%;
}


.tile-container{
  float:left;
  margin:5px;
  width:400px;
  height:200px;
  overflow:hidden;
   -webkit-transition: all .2s ease-in-out;
   -webkit-transform: scale(1.0);
   -moz-transition: all .2s ease-in-out;
   -moz-transform: scale(1.0);
   -o-transition: all .2s ease-in-out;
   -o-transform: scale(1.0);
   transition: all .2s ease-in-out;
   transform: scale(1.0);
}

.tile-container:hover{
   -webkit-transform: translate(0px,-100%);
   -moz-transform: translate(0px,-100%);
   -o-transform: translate(0px,-100%);
   transform: translate(0px,-100%);

   -webkit-transition: all .2s ease-in-out;
   -webkit-transform: scale(1.0);
   -moz-transition: all .2s ease-in-out;
   -moz-transform: scale(1.0);
   -o-transition: all .2s ease-in-out;
   -o-transform: scale(1.0);
   transition: all .2s ease-in-out;
   transform: scale(1.0);
   width:450px;
   height:350px;
}
.tile-container:hover > .tile{
   -webkit-transform: translate(0px,-100%);
   -moz-transform: translate(0px,-100%);
   -o-transform: translate(0px,-100%);
   transform: translate(0px,-100%);
   background-size: 450px 350px;

}
.tile{
  background:inherit;
  width:inherit;
  height:inherit;
  float:left;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  padding:10px;
  color:#fff;

}

.circular {
    width: 50px;
    height: 50px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;

    }

.circular img {
    opacity: 0;
    filter: alpha(opacity=0);
    border:10px;
    border-color:#fff;
    }

/* This is the css i want to inject, using the animated variable below in var_post =
.active-tile > .tile{
  -webkit-transform: translate(0px,-100%);
  -moz-transform: translate(0px,-100%);
  -o-transform: translate(0px,-100%);
  transform: translate(0px,-100%);
}
*/


#social.JS


(function(){

var app = angular.module('userProfile', [ ]);

app.controller('ProfileController', function($scope){

    this.userPost = user_post;
    this.user = username;

});


var username = {
    username:'Grant',
    tagline:'Whats up yo',
    profileimage:'images/profile.jpg',
}

var user_post = [
{ 
title: 'test1',
message: 'this is a  post', 
hide:false,
image: 'images/pic02.jpg',
animated:'.active-tile>.tile{-webkit-transform: translate(0px,-100%);-moz-transform: translate(0px,-100%);-o-transform: translate(0px,-100%);transform: translate(0px,-100%);}'
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic03.jpg',
},
{ 
title: 'test3',
message: 'this is a  post3 with a lot of data to see if it exampes', 
hide:false,
image: 'images/pic04.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic05.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic06.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic07.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic08.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic05.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic04.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic07.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic02.jpg',
},
{ 
title: 'test2',
message: 'this is a  post2', 
hide:false,
image: 'images/pic06.jpg',
}
]


})();


#HTML



<html>
    <head>
        <title>Relic</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/MetroJs.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<script src="js/MetroJs.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>     

<script>
        document.write('<base href="' + document.location + '" />');
</script>

</head>

<body class="metro" ng-app="userProfile" ng-controller="ProfileController as post">

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Relic</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<div id="content">

                <div class="tile-container" ng-repeat="userpost in post.userPost" >
                    <div class="tile" style="background-image: url('{{userpost.image}}');{{userpost.animated}}" >
                        <div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
                        <div class="weather-text">
                          <span class="location">{{userpost.title}}</span>
                        </div>
                    </div>
                    <div class="tile" style="background-image: url('{{userpost.image}}');" >
                       <div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat;  background-size: 50px 50px; border:5px; border-color:#fff;"></div>
                        <div class="weather-text">
                          <span class="temperature">{{userpost.message}}</span>
                        </div>
                    </div>
                </div>

</div>

</body>
</html>

最佳答案

将 .tile-container:hover 更改为 .active

$(".title-container").click(function(){
    $(this).toggleClass("active");
});

关于javascript - 你如何在div点击上执行悬停样式/你如何使用js设置高级样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25315258/

上一篇：css - 简单 CSS : . 类的奇怪之处:悬停属性被#child 的属性覆盖

下一篇：html - 是否可以从数据列表中禁用下拉功能？

相关文章：

javascript - laravel 中的 Vue.js 错误

html - 你如何使用 CSS 创建类似梯形的 div

php - 为什么它没有像它应该做的那样改变背景颜色？

javascript - 如何用html页面替换模态对话框？我需要重定向到 html 页面而不使用模式对话框

javascript - 函数需要等到选择标签的值被选中

javascript - 我如何在 DataTable jQuery 插件中打印总金额

javascript - 如何将此 html 添加到 div 中，转义引号？

javascript - typescript 中的 String[] 和 [String] 有什么区别？

javascript - 基于 iframe src 更改类

javascript - 让 Html.Raw 在 MVC Razor Javascript 的 if 语句中工作？

©2024 IT工具网  联系我们