我正在尝试将图像(加号)旋转45度以创建十字符号.到目前为止,我已经设法使用下面的代码来实现这一点,但它正在进行悬停,我想让它在点击时旋转.
使用CSS有一种简单的方法吗？
我的代码是:
CSS
img {
display: block;
margin: 20px;
}
.crossRotate {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.crossRotate:hover {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
HTML
<body>
<img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>
这是jsfiddle演示.
我希望实现这种类型的向下滑动,除了而不是悬停我认为我需要某种类型的脚本,在点击时触发向下滑动,然后再次单击以触发反向滑动.我将隐藏一个div(顶部:-400px;位于页面顶部之上),当单击按钮并向下滑动并坐在顶部时:0;
HTML
<div class="container"><div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>
</div>
CSS
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: lightblue;
z-index: 1;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
.one:hover + .two {
top: 0px;
}
这是一个工作小提琴http://jsfiddle.net/8ZFMJ/2/ - 任何帮助将不胜感激.
我已经尝试过使用slideToggle但是这会创建一个"扩展"效果,这不是我想要实现的向下滑动的类型.
非常感谢.
我试图找到一种方法来隐藏vimeo视频顶部和底部的黑条.我想可能有办法用CSS掩盖它们.
我基本上想要实现这个人想要通过下面的链接中的图像实现的目标,除了我想用嵌入式视频做它同时保持它的代表性.
非常感谢.
HTML
<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
我已按照本教程实施弹出式电子邮件简报注册,以添加到我的Shopify主题,该主题使用fancybox.js和cookie.js.一切正常,除非您输入电子邮件地址并单击"注册",即使打开其他选项卡以完成Mailchimp注册过程,在原始商店选项卡上,电子邮件弹出窗口保持打开状态,好像没有任何更改.
我想知道是否有一种方法可以调整代码,以便在点击"注册"时,新标签正常打开但电子邮件弹出窗口淡出,所以当用户返回商店时,弹出窗口已消失.我对JS不太好,所以任何帮助都会非常感激!
我目前的代码:
theme.liquid -
液体HTML:
{% if settings.popup_newsletter_enable %}
<div id="email-popup" style="display: none;" >
{% include 'popup-newsletter-form' %}
</div>
<a href="#email-popup" id="trigger"></a>
{% endif %}
JS:
{{ 'jquery.fancybox.js' | asset_url | script_tag }}
<script type="text/javascript">
(function($) {
// set a variable for the cookie check
var check_cookie = $.cookie('popup_box');
// check whether the cookie is already set for this visitor
if( check_cookie != 'active' ){
// if the cookie does not exist do the following:
// (1) …我有以下代码用于样式化订阅按钮，我一直在尝试获取它，以便在悬停时整个框的背景颜色发生变化，并且文本“订阅”的颜色也会改变颜色。目前，我下面的代码更改了背景颜色，但仅当我直接将鼠标悬停在其上时才会更改文本的颜色。我希望能够将鼠标悬停在框上的任何位置，并且这两个元素会一起改变颜色……有人能指出我哪里出错了吗？
HTML：
<h3 class="subscribeHeader">
<a href="http://link.com/" target="_blank">Subscribe</a>
</h3>
CSS：
h3.subscribeHeader {
padding-top: 0.7em;
padding-bottom: 0.7em;
width: 35%;
margin: 0 auto;
border: 1px solid #373737;
}
h3.subscribeHeader a:hover {
color: #fafaf9;
}
h3.subscribeHeader:hover {
background-color: #373737;
}
我正在创建一个简单的房屋列表页面以掌握Rails,我目前有一个添加帖子页面设置,它发布到索引页面,但最新的帖子显示在页面的底部.我怎么能颠倒我的帖子的顺序来显示顶部的最新帖子？
不确定我应该提供哪些代码片段,但下面是我的代码:
houses_controller.rb -
class HousesController < ApplicationController
def index
@houses = House.page(params[:page]).per(20)
end
def new
@house = House.new
end
def create
@house = House.new(params.require(:house).permit(:title, :price, :description, :image))
if @house.save
redirect_to root_path
else
render "new"
end
end
end
index.html.erb -
<% @houses.each do |house| %>
<div class="house">
<p><%= house.image %></p>
<h2><%= house.title %></h2>
<h2><%= house.price %></h2>
<p><%= house.description %></p>
</div>
<% end %>
<p><%= paginate @houses %></p>
house.rb -
class House < ActiveRecord::Base
validates :title, presence: true
validates :price, presence: …我正在创建一个简单的工作板,并希望以格式显示帖子的创建日期 - '发布于:2015年2月11日'
我想在两个地方展示它,在我的索引(index.html.erb)中发布帖子和各个帖子页面(show.html.erb)
我目前的代码如下:
index.html.erb -
<p><%= link_to "Add a Position", new_job_path %></p>
<% @jobs.each do |job| %>
<div class="job">
<%= link_to job.position, job %>
<br><br>
<ul class="entry_list">
<li>Company: <%= job.company %></li>
<li>Salary: <%= job.salary %></li>
<li>Contract Type: <%= job.contract %></li>
<li>City: <%= job.city %></li>
<li>Expiry date: <%= job.expirydate %></li>
<li>Job Type: <%= job.jobtype %></li>
</ul>
</div>
<% end %>
<p><%= paginate @jobs %></p>
show.html.erb -
<%= @job.position %>
<ul>
<li>Company: <%= @job.company %></li>
<li>Salary: <%= @job.salary %></li>
<li>Contract …